{"id":4333,"date":"2010-04-16T20:05:36","date_gmt":"2010-04-16T18:05:36","guid":{"rendered":"http:\/\/www.chipwreck.de\/blog\/?page_id=4333"},"modified":"2018-01-10T13:39:37","modified_gmt":"2018-01-10T12:39:37","slug":"demo","status":"publish","type":"page","link":"https:\/\/www.chipwreck.de\/blog\/software\/cwvideo\/demo\/","title":{"rendered":"CwVideo &#8211; Demo"},"content":{"rendered":"<div class=\"contentnavi\">\n<p class=\"contentnav1 center\">\n<a href=\"\/blog\/software\/cwvideo\/\">About \/ Feedback<\/a> &bull;<br \/>\n<span class=\"pink\">Demo<\/span> &bull;<br \/>\n<a href=\"\/blog\/software\/cwvideo\/help\/\">Help \/ Download<\/a>\n<\/p>\n<\/div>\n<h4 class=\"desc\">Demo for CwVideo<\/h4>\n<p class=\"pink\"><strong>Notice: These examples only work in Safari, Firefox, Chrome or Opera (finally..).<\/strong><\/p>\n<p>\t<script type=\"text\/javascript\" src=\"\/blog\/wp-content\/themes\/chipwreck\/js\/mootools-1.2.5-core-yc.js\"><\/script><br \/>\n\t<script type=\"text\/javascript\" src=\"\/blog\/wp-content\/themes\/chipwreck\/js\/mootools-1.2.4.4-more-all-yc.js\"><\/script><br \/>\n\t<script type=\"text\/javascript\" src=\"\/blog\/wp-content\/themes\/chipwreck\/js\/chipwreck.js\"><\/script><\/p>\n<p><script type=\"text\/javascript\" src=\"\/blog\/wp-content\/themes\/chipwreck\/js\/cwvideo.js\"><\/script><br \/>\n<script type=\"text\/javascript\">\nwindow.addEvent('domready', function() {<\/p>\n<p>\tmyvideo = new CwVideo('myvid'); \/\/ initialize CwVideo<\/p>\n<p>\tvar timeSlider1 = new CwVideo.Timeline('timeSliderBg', 'timeSlider', {\n\t    wheel: true,\n\t    video: 'myvid',\n\t\ttimeDisplay: 'timeSlider'\n\t});<\/p>\n<p>\tvar volSlider1 = new CwVideo.Volumeslider('volSliderBg', 'volSlider', {\n\t    initialVolume: 0.2,\n\t    range: [0, 10],\n\t    mode: 'vertical',\n\t    snap: true,\n\t    steps: 10,\n\t    video: 'myvid'\n\t});<\/p>\n<p>\tvar volSlider2 = new CwVideo.Volumeslider('volSliderBg2', 'volSlider2', {\n\t    video: 'myvid'\n\t});<\/p>\n<p>\t\/\/ Mute button on\/off state + display current volume\n\tmyvideo.video.addEvent('volumechange', function() {\n\t\t$('mutebutton').setStyle('color', ( this.get('muted') ? '#f00' : '#000' ) );\n\t\t$('volSlider').set('html', this.get('volume').toFixed(2));\n\t});<\/p>\n<p>\t\/\/ Playback button on\/off state\n\tmyvideo.addEvent('playbackHasChanged', function() {\n\t\t$('playbutton').setStyle('color', ( this.video.get('paused') ? '#000' : '#00f' ) );\n\t});<\/p>\n<p>\t\/\/ Show event and state details\n\t$each(CwVideo.mediaEvents, function(event_key, an_event){\n\t\t$('myvid').addEvent(an_event, function(an_event){\n\t\t\t$('videvent').set('html', an_event.type);\n\t\t\t$('vidreadystate').set('html', myvideo.getReadyState());\n\t\t\t$('vidnetworkstate').set('html', myvideo.getNetworkState());\n\t\t});\n\t});<\/p>\n<p>\t\/\/ Show detailed video info\n\t$('infobutton').addEvent('click', function(e) {\n\t\tout = '';\n\t\t$each(CwVideo.mediaProperties, function(is_w, a_property) {\n\t\t\tout += '<label>' + a_property + \":<\/label> \" + $('myvid').get(a_property) + \"\\n\";\n\t\t});\t\n\t\t$('info').set('html', out);\n\t});<\/p>\n<p>\tmyvideo.addEvent('error', function(event) {console.log(event.target.error);});<\/p>\n<p>});\n<\/script><\/p>\n<style>\n\t.slider { background-color: #eee; border: 1px solid #999; cursor: pointer; }\n\t.knob { background-color: #999; text-align: center; padding: 2px; color: #fff; font-size: 11px; cursor: pointer; }\t\n<\/style>\n<h5>Example video (h.264\/ogg)<\/h5>\n<div class=\"anaction\">\n\t<video id=\"myvid\" width=\"320\" height=\"240\" poster=\"\/videos\/daftpunk\/DaftPunk_Poster.jpg\"><source src=\"\/videos\/daftpunk\/DaftPunk_Concert.ogg\" type='video\/ogg; codecs=\"theora, vorbis\"'><source src=\"\/videos\/daftpunk\/DaftPunk_Concert.mp4\" type='video\/mp4; codecs=\"avc1.42E01E, mp4a.40.2\"'><\/video>\n<\/div>\n<div class=\"anaction\">\n<p><small>Current Event:<\/small> <span id=\"videvent\"><\/span><\/p>\n<p><small>Ready State:<\/small> <span id=\"vidreadystate\"><\/span><\/p>\n<p><small>Network State:<\/small> <span id=\"vidnetworkstate\"><\/span><\/p>\n<\/div>\n<h6>Scriptable Controls<\/h6>\n<p class=\"anaction\">\n\t<button id=\"playbutton\" onclick=\"myvideo.togglePlay()\">Play\/Pause<\/button><br \/>\n\t<button id=\"stopbutton\" onclick=\"myvideo.stop()\">STOP<\/button><br \/>\n\t<button onclick=\"myvideo.rewind()\">&laquo; Rewind<\/button><br \/>\n\t<button onclick=\"myvideo.move(-3)\">-3s<\/button><br \/>\n\t<button onclick=\"myvideo.move(3)\">+3s<\/button><\/p>\n<p>\t<button id=\"playbutton2\" onclick=\"myvideo.play()\">Play<\/button><br \/>\n\t<button id=\"pausebutton\" onclick=\"myvideo.pause()\">Pause<\/button><br \/>\n\t<button onclick=\"myvideo.move('0:01')\">go to 00:01<\/button><\/p>\n<p>\t<button onclick=\"myvideo.volumeChange(-0.1)\">Vol-<\/button><br \/>\n\t<button onclick=\"myvideo.volumeChange(+0.1)\">Vol+<\/button><\/p>\n<p>\t<button id=\"mutebutton\" onclick=\"myvideo.toggleMute()\">Mute<\/button><\/p>\n<p>\t<button onclick=\"myvideo.video.set('controls', !myvideo.video.get('controls'))\">toggle browser video controls<\/button><\/p>\n<h5>Timeline: Current time displayed, mouse wheel control<\/h5>\n<div class=\"anaction\">\n<div id=\"timeSliderBg\" class=\"slider\" style=\"width: 320px;\">\n<div id=\"timeSlider\" class=\"knob\" style=\"width: 40px\">&#8211;<\/div>\n<\/div>\n<\/div>\n<h5>Volumeslider 1: Vertical, snap enabled, volume display<\/h5>\n<div class=\"anaction\">\n<div id=\"volSliderBg\" class=\"slider\" style=\"height: 127px; width: 40px;\">\n<div id=\"volSlider\" class=\"knob\" style=\"height: 15px; width: 36px;\">&#8211;<\/div>\n<\/div>\n<\/div>\n<h5>Volumeslider 2: Horizontal, no snap<\/h5>\n<div class=\"anaction\">\n<div id=\"volSliderBg2\" class=\"slider\" style=\"width: 130px; height: 20px;\">\n<div id=\"volSlider2\" class=\"knob\" style=\"height: 16px; width: 36px;\">&nbsp;<\/div>\n<\/div>\n<\/div>\n<h5>Video Attributes<\/h5>\n<p class=\"anaction\">\n\t<button id=\"infobutton\">Show &raquo;<\/button><\/p>\n<p id=\"info\">\n<h5>Comments, Feedback, Questions? <a href=\"\/blog\/software\/cwvideo\/#respond\">Comment here &raquo;<\/a><\/h5>\n","protected":false},"excerpt":{"rendered":"<p>About \/ Feedback &bull; Demo &bull; Help \/ Download Demo for CwVideo Notice: These examples only work in Safari, Firefox, Chrome or Opera (finally..). Example video (h.264\/ogg) Current Event: Ready State: Network State: Scriptable Controls Play\/Pause STOP &laquo; Rewind -3s +3s Play Pause go to 00:01 Vol- Vol+ Mute toggle browser video controls Timeline: Current &hellip; <\/p>\n<p class=\"link-more\"><a href=\"https:\/\/www.chipwreck.de\/blog\/software\/cwvideo\/demo\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;CwVideo &#8211; Demo&#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-4333","page","type-page","status-publish","hentry"],"jetpack_shortlink":"https:\/\/wp.me\/PaPEN-17T","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.chipwreck.de\/blog\/wp-json\/wp\/v2\/pages\/4333","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=4333"}],"version-history":[{"count":2,"href":"https:\/\/www.chipwreck.de\/blog\/wp-json\/wp\/v2\/pages\/4333\/revisions"}],"predecessor-version":[{"id":8153,"href":"https:\/\/www.chipwreck.de\/blog\/wp-json\/wp\/v2\/pages\/4333\/revisions\/8153"}],"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=4333"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}