{"id":4172,"date":"2010-02-23T20:15:38","date_gmt":"2010-02-23T19:15:38","guid":{"rendered":"http:\/\/www.chipwreck.de\/blog\/?p=4172"},"modified":"2018-01-10T13:43:35","modified_gmt":"2018-01-10T12:43:35","slug":"html-5-video-test-area","status":"publish","type":"post","link":"https:\/\/www.chipwreck.de\/blog\/2010\/02\/23\/html-5-video-test-area\/","title":{"rendered":"HTML 5 &#038; Video \u2013 Test area"},"content":{"rendered":"<p>This is work in progress &#8211; <del datetime=\"2010-02-26T21:53:33+00:00\">the next days I&#8217;ll write up<\/del> See the related box to view a post about how to use the new HTML 5-video tag.<!--more--><\/p>\n<p>First Tests:<\/p>\n<table class=\"shortcuts\">\n<tr>\n<td>Safari 4 Mac<\/td>\n<td>works<\/td>\n<\/tr>\n<tr>\n<td>Chrome 5 Mac<\/td>\n<td>works<\/td>\n<\/tr>\n<tr>\n<td>Firefox 3.6 Mac<\/td>\n<td>works<\/td>\n<\/tr>\n<tr>\n<td>Firefox 3.6 Windows<\/td>\n<td>works<\/td>\n<\/tr>\n<tr>\n<td>Opera 10.10 Windows<\/td>\n<td>no<\/td>\n<\/tr>\n<tr>\n<td>Opera 10.5 Mac<\/td>\n<td>no<\/td>\n<\/tr>\n<tr>\n<td>Internet Explorer<\/td>\n<td>LOL, no<\/td>\n<\/tr>\n<\/table>\n<h4>Inline video in two formats with controls<\/h4>\n<p><video width=\"320\" height=\"240\" controls><source src=\"\/videos\/daftpunk\/DaftPunk_Concert.mp4\" type='video\/mp4; codecs=\"avc1.42E01E, mp4a.40.2\"'><source src=\"\/videos\/daftpunk\/DaftPunk_Concert.ogg\" type='video\/ogg; codecs=\"theora, vorbis\"'><\/video><\/p>\n<p class=\"small\">Daft Punk 2007, D\u00fcsseldorf<\/p>\n<h4>Code<\/h4>\n<p><code lang=\"html\"><br \/>\n<video width=\"320\" height=\"240\" controls><source src=\"\/videos\/daftpunk\/DaftPunk_Concert.mp4\" type='video\/mp4; codecs=\"avc1.42E01E, mp4a.40.2\"'><source src=\"\/videos\/daftpunk\/DaftPunk_Concert.ogg\" type='video\/ogg; codecs=\"theora, vorbis\"'><\/video><br \/>\n<\/code><\/p>\n<h4>Custom controls with javascript\/mootools<\/h4>\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","protected":false},"excerpt":{"rendered":"<p>A HTML 5 video test area &#8211; a detailed post will follow the next days..<\/p>\n","protected":false},"author":2,"featured_media":2985,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[8],"tags":[55,10,79],"class_list":["post-4172","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-webdevelopment","tag-javascript-mootools","tag-mootools","tag-webdesign"],"jetpack_featured_media_url":"https:\/\/www.chipwreck.de\/blog\/wp-content\/uploads\/2008\/02\/Daft-Punk-Videostill.png","jetpack_shortlink":"https:\/\/wp.me\/paPEN-15i","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.chipwreck.de\/blog\/wp-json\/wp\/v2\/posts\/4172","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.chipwreck.de\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.chipwreck.de\/blog\/wp-json\/wp\/v2\/types\/post"}],"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=4172"}],"version-history":[{"count":1,"href":"https:\/\/www.chipwreck.de\/blog\/wp-json\/wp\/v2\/posts\/4172\/revisions"}],"predecessor-version":[{"id":8158,"href":"https:\/\/www.chipwreck.de\/blog\/wp-json\/wp\/v2\/posts\/4172\/revisions\/8158"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.chipwreck.de\/blog\/wp-json\/wp\/v2\/media\/2985"}],"wp:attachment":[{"href":"https:\/\/www.chipwreck.de\/blog\/wp-json\/wp\/v2\/media?parent=4172"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.chipwreck.de\/blog\/wp-json\/wp\/v2\/categories?post=4172"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.chipwreck.de\/blog\/wp-json\/wp\/v2\/tags?post=4172"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}