{"id":4339,"date":"2010-04-16T20:35:42","date_gmt":"2010-04-16T18:35:42","guid":{"rendered":"http:\/\/www.chipwreck.de\/blog\/?page_id=4339"},"modified":"2016-12-31T02:42:34","modified_gmt":"2016-12-31T01:42:34","slug":"help","status":"publish","type":"page","link":"https:\/\/www.chipwreck.de\/blog\/software\/cwvideo\/help\/","title":{"rendered":"CwVideo &#8211; Help"},"content":{"rendered":"<div class=\"contentnavi\">\n<p class=\"contentnav1 center\">\n<a href=\"\/blog\/software\/cwvideo\/\">About \/ Feedback<\/a> &bull;<br \/>\n<a href=\"\/blog\/software\/cwvideo\/demo\/\">Demo<\/a> &bull;<br \/>\n<span class=\"pink\">Help \/ Download<\/span>\n<\/p>\n<\/div>\n<p><a name=\"help1\"><\/a><\/p>\n<h3>Requirements<\/h3>\n<ul>\n<li>Works in Safari 3+, Firefox 3+, Chrome 3+, Opera 10.5+<\/li>\n<li>Requires mootools 1.24+ Core and Fx.Slider (1.24+ More)<\/li>\n<\/ul>\n<h3>Download<\/h3>\n<p><a class=\"download imgshadow action external\" href=\"http:\/\/mootools.net\/forge\/p\/cwvideo\">Download at Mootools Forge &raquo;<\/a><\/p>\n<h5>Comments? Problems? Feedback? <a href=\"\/blog\/software\/cwvideo\/#respond\"> Leave a comment &raquo;<\/a><\/h5>\n<p>GitHub Repository: <a class=\"external\" href=\"https:\/\/github.com\/mariofischer\/cwvideo\">github.com\/mariofischer\/cwvideo &raquo;<\/a><\/p>\n<p class=\"toplink\"><a href=\"#top\">&#x21e7; top<\/a><\/p>\n<p><a name=\"help2\"><\/a><\/p>\n<h3>Documentation<\/h3>\n<h5>What is this plugin about?<\/h5>\n<p>First at all it extends the current (1.24) mootools release to handle the new HTML5 video-tag. So you can easily access a videos properties and control the video in a mootools-like way.<\/p>\n<p>Furthermore it contains two extensions to the Fx.Slider class from mootools:<br \/><strong>CwVideo.Volumeslider<\/strong> creates a volume slider<br \/><strong>CwVideo.Timeline<\/strong> for a timeline slider with several features to simplify creating your own video controls.<\/p>\n<h4>CwVideo<\/h4>\n<p>Given a HTML-page with a video embedded, you simply call CwVideo(id) with the id of the video tag. Then you can immediately access the properties of the video like duration, volume etc. These properties can be accessed via mootools:<\/p>\n<h5>Initial setup and usage<\/h5>\n<pre lang=\"javascript\">\r\nmyvideo = new CwVideo('myvid'); \/\/ initialize CwVideo\r\n\r\n\/\/ video controls shown?\r\nif (myvideo.video.get('controls')) { ... }\r\n\r\n\/\/ get and set volume\r\nset myvol = myvideo.video.get('volume');\r\nmyvideo.video.set('volume', 0.5);\r\n<\/pre>\n<h5>CwVideo &#8211; Documentation<\/h5>\n<p>Use myvideo.video to access the HTML-video element and following methods and events:<\/p>\n<h5>Parameters<\/h5>\n<ul>\n<li><strong>element<\/strong>: ID of the HTML video element<\/li>\n<\/ul>\n<h5>Methods<\/h5>\n<ul>\n<li><strong>rewind: function()<\/strong>: Rewind video to beginning<\/li>\n<li><strong>move: function(secs)<\/strong>: Move playback forward or backward given amount (positive or negative numbers)<\/li>\n<li><strong>play: function()<\/strong>: Play video<\/li>\n<li><strong>pause: function()<\/strong>: Pause video<\/li>\n<li><strong>stop: function()<\/strong>: Stop playback and rewind<\/li>\n<li><strong>togglePlay: function()<\/strong>: Play\/Pause video toggle<\/li>\n<li><strong>toggleMute: function()<\/strong>: Toggle &#8220;muted&#8221; state<\/li>\n<li><strong>volumeChange: function(amt)<\/strong>: Change volume by positive or negative values (volume is from 0.0 to 1.0)<\/li>\n<li><strong>getNetworkState: function()<\/strong>: Get current network state as string<\/li>\n<li><strong>getReadyState: function()<\/strong>: Get current ready state as string<\/li>\n<\/ul>\n<h5>Events<\/h5>\n<ul>\n<li><strong>onPlaybackHasChanged: function(el, value)<\/strong> &#8211; Triggered if playback has changed (play, pause, loadstart)<\/li>\n<\/ul>\n<h4>CwVideo.Timeline<\/h4>\n<p>This is an extension of Fx.Slider, usage example:<\/p>\n<pre lang=\"javascript\">\r\nvar timeSlider1 = new CwVideo.Timeline('timeSliderBg', 'timeSlider', {\r\n    wheel: true,\r\n    video: 'myvid',\r\n    timeDisplay: 'timeSlider'\r\n});\r\n<\/pre>\n<h5>Parameters<\/h5>\n<ul>\n<li><strong>element<\/strong>: ID of the enclosing slider element<\/li>\n<li><strong>knob<\/strong>: ID of the knob<\/li>\n<li><strong>options<\/strong>: Options to use<\/li>\n<\/ul>\n<h5>Options<\/h5>\n<p>All options from Fx.Slider PLUS the following:<\/p>\n<ul>\n<li><strong>video<\/strong>: <em class=\"small\">false<\/em> ID of the video element<\/li>\n<li><strong>timeDisplay<\/strong>: <em class=\"small\">false<\/em> ID of the element where the current time shall be displayed<\/li>\n<li><strong>timeAsPercent<\/strong>: <em class=\"small\">false<\/em> If true: display time as percent (instead of mm.s)<\/li>\n<li><strong>timeDisplayDisabled<\/strong>: <em class=\"small\">&#8212;<\/em> Text to show in the time display, if current time is not available.<\/li>\n<\/ul>\n<h5>Events<\/h5>\n<p>All events from Fx.Slider PLUS the following:<\/p>\n<ul>\n<li><strong>onChange: function(position)<\/strong> &#8211; Triggered each time the sliders position has changed<\/li>\n<li><strong>onError: function(error)<\/strong> &#8211; Triggered if an error has occured<\/li>\n<\/ul>\n<h4>CwVideo.Volumeslider<\/h4>\n<p>This is an extension of Fx.Slider, usage example:<\/p>\n<pre lang=\"javascript\">\r\nvar volSlider1 = new CwVideo.Volumeslider('volSliderBg', 'volSlider', {\r\n    initialVolume: 0.2,\r\n    range: [0, 10],\r\n    mode: 'vertical',\r\n    snap: true,\r\n    steps: 10,\r\n    video: 'myvid'\r\n});\r\n<\/pre>\n<h5>Parameters<\/h5>\n<ul>\n<li><strong>element<\/strong>: ID of the enclosing slider element<\/li>\n<li><strong>knob<\/strong>: ID of the knob<\/li>\n<li><strong>options<\/strong>: Options to use<\/li>\n<\/ul>\n<h5>Options<\/h5>\n<p>All options from Fx.Slider PLUS the following:<\/p>\n<ul>\n<li><strong>video<\/strong>: <em class=\"small\">false<\/em> ID of the video element<\/li>\n<li><strong>initialVolume<\/strong>: <em class=\"small\">false<\/em> If set, the videos volume is initially set to the given value (0.0 &#8211; 1.0)<\/li>\n<\/ul>\n<h5>Events<\/h5>\n<p>All events from Fx.Slider PLUS the following:<\/p>\n<ul>\n<li><strong>onChange: function(position)<\/strong> &#8211; Triggered each time the sliders position has changed<\/li>\n<li><strong>onError: function(error)<\/strong> &#8211; Triggered if an error has occured<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>About \/ Feedback &bull; Demo &bull; Help \/ Download Requirements Works in Safari 3+, Firefox 3+, Chrome 3+, Opera 10.5+ Requires mootools 1.24+ Core and Fx.Slider (1.24+ More) Download Download at Mootools Forge &raquo; Comments? Problems? Feedback? Leave a comment &raquo; GitHub Repository: github.com\/mariofischer\/cwvideo &raquo; &#x21e7; top Documentation What is this plugin about? First at &hellip; <\/p>\n<p class=\"link-more\"><a href=\"https:\/\/www.chipwreck.de\/blog\/software\/cwvideo\/help\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;CwVideo &#8211; Help&#8221;<\/span><\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"parent":4326,"menu_order":0,"comment_status":"closed","ping_status":"open","template":"","meta":{"footnotes":""},"class_list":["post-4339","page","type-page","status-publish","hentry"],"jetpack_shortlink":"https:\/\/wp.me\/PaPEN-17Z","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.chipwreck.de\/blog\/wp-json\/wp\/v2\/pages\/4339","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.chipwreck.de\/blog\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.chipwreck.de\/blog\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.chipwreck.de\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.chipwreck.de\/blog\/wp-json\/wp\/v2\/comments?post=4339"}],"version-history":[{"count":0,"href":"https:\/\/www.chipwreck.de\/blog\/wp-json\/wp\/v2\/pages\/4339\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/www.chipwreck.de\/blog\/wp-json\/wp\/v2\/pages\/4326"}],"wp:attachment":[{"href":"https:\/\/www.chipwreck.de\/blog\/wp-json\/wp\/v2\/media?parent=4339"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}