{"id":39,"date":"2014-12-03T00:10:46","date_gmt":"2014-12-02T23:10:46","guid":{"rendered":"http:\/\/bitpals.com\/de\/?p=39"},"modified":"2018-05-13T14:20:25","modified_gmt":"2018-05-13T12:20:25","slug":"html5-video-einfuegen","status":"publish","type":"post","link":"https:\/\/bitpals.com\/de\/blog\/2014\/html5-video-einfuegen\/","title":{"rendered":"HTML5 Video einf\u00fcgen"},"content":{"rendered":"<p>Eine Anfrage zum Einf\u00fcgen eines Filmclips auf einer Webseite schickte mich neulich auf die Suche nach einer L\u00f6sung die alle modernen Browser unterst\u00fctzt. Ein neueres JavaScript-Paket, <a href=\"http:\/\/www.videojs.com\/\">videojs.com<\/a>, bot sich an, besonders wegen der aktiven Enwicklung.<\/p>\n<p>Anfangs schien es perfekt, dann gab es Schwierigkeiten mit der Benutzung. Ich wollte Abspielen und Pause mit der Leertaste ausl\u00f6sen, die untere Steuer\u00adleiste vor Start ausblenden, und der Film sollte am Ende wieder zur\u00fcckspulen. Das Problem mit der Leertaste war nicht zu beheben. Obendrein stellte sich die Wahl einer befriedigenden L\u00f6sung schwer wegen der \u00fcberaus agilen Entwicklung des Produkts, wobei\u00a0Funktionen unkommentiert fallengelassen, ge\u00e4ndert und wieder aufgegriffen wurden.<\/p>\n<p>Geht das nicht einfacher? In der Tat.<!--more--><\/p>\n<h4>Die L\u00f6sung:<\/h4>\n<p>Keinen extra JavaScript-Ballast einf\u00fcgen. Nur die einfache <code>&lt;video&gt;<\/code> Tag.<\/p>\n<pre>&lt;video id=\"oceans\" controls preload=\"auto\" width=\"582\" height=\"242\" poster=\"http:\/\/bitpals.com\/en\/wp-content\/uploads\/2014\/11\/oceans.jpg\"&gt;\r\n  &lt;source type=\"video\/mp4\" src=\"http:\/\/vjs.zencdn.net\/v\/oceans.mp4\"&gt;&lt;\/source&gt;\r\n  &lt;source type=\"video\/webm\" src=\"http:\/\/vjs.zencdn.net\/v\/oceans.webm\"&gt;&lt;\/source&gt;\r\n&lt;\/video&gt;<\/pre>\n<p>Und siehe da:<\/p>\n<p><video id=\"oceans\" poster=\"http:\/\/bitpals.com\/en\/wp-content\/uploads\/2014\/11\/oceans.jpg\" preload=\"auto\" controls=\"controls\" width=\"582\" height=\"242\"><source type=\"video\/mp4\" src=\"http:\/\/vjs.zencdn.net\/v\/oceans.mp4\" \/><source type=\"video\/webm\" src=\"http:\/\/vjs.zencdn.net\/v\/oceans.webm\" \/><\/video><br \/>\n<script type=\"text\/javascript\">\n\t(function(){\n\t\t\/\/ Video am Ende neu laden\n\t\tvar video = document.getElementsByTagName('video')[0];\n\t\tvideo.addEventListener('ended', function() {\n\t\t\tvideo.load();\n\t\t});\n\t\t\/\/ Play\/Pause mit Leertaste bedienen\n\t\twindow.addEventListener('keydown', function(event) {\n\t\t\tconsole.log(event.keyCode);\n\t\t\tif(event.keyCode === 32) {\n\t\t\t\tif(video.paused) {\n\t\t\t\t\tvideo.play();\n\t\t\t\t}\n\t\t\t\telse {\n\t\t\t\t\tvideo.pause();\n\t\t\t\t}\n\t\t\t\tevent.preventDefault();\n\t\t\t}\n\t\t});\n<\/script><\/p>\n<p>Der Player hat den Fokus w\u00e4hrend des Abspielens, und so wird das Dr\u00fccken der Leertaste f\u00fcr Abspielen \/ Pause durchgereicht.<\/p>\n<p>Der Film ist so spielbar in allen aktuellen Browsern, auch im Internet Explorer (IE)\u00a09. \u00c4ltere IE-Versionen brauchen extra Hilfe f\u00fcr HTML5. Eine interessante L\u00f6sung daf\u00fcr (die ich nicht getestet habe) ist der <a href=\"http:\/\/v4e.thewikies.com\/\">Video For Everybody Generator<\/a>, der JavaScript f\u00fcr alle Browser erzeugt. Mehr Infos dazu bei <a href=\"http:\/\/www.dev-metal.com\/crossbrowser-safe-html5-video-ie6-lines-code\/\">Crossbrowser-safe HTML5 video<\/a>.<\/p>\n<p>Die Basisfunktionen werden zwar in den aktuellen Browsern unterst\u00fctzt, es gibt jedoch Unterschiede in der Umsetzung. Firefox (cool!) stellt den gro\u00dfen Abspielknopf mitten aufs Video und beh\u00e4lt den Fokus beim Klick auch darauf, so da\u00df der Film sich mit der Leertaste bedienen l\u00e4\u00dft. Google Chrome bietet den Knopf nicht, und damit auch nicht die Bedienung mit der Leertaste. Ich glaube, die Benutzer sollten\u00a0aber letztendlich selber entscheiden, welchen Browser sie bevorzugen. So m\u00fcssen Entwickler sich nicht um die Browser, sondern nur um die Benutzer k\u00fcmmern, und das ist <em>gut so<\/em>.<\/p>\n<h4>Update!<\/h4>\n<p>Mit einem kleinen JavaScript-Schnipsel funktioniert die Leertaste browser\u00ad\u00fcbergreifend, auch auf Chrome. Danke an <a href=\"https:\/\/www.xing.com\/profile\/JanSoeren_Wiemers\">Jan-S\u00f6ren Wiemers<\/a> von Xing f\u00fcr den Tip!<\/p>\n<p>Wir brauchen noch ein paar kleine Optimierungen, um die Steuerleiste beim Laden der Seite auszublenden und den Film nach Ende zur\u00fcckzuspulen. Dazu kommt die Leertaste f\u00fcr die anderen Browser.<\/p>\n<h4>Optimierungen:<\/h4>\n<p>Das Manipulieren der sogen. Media Events wird durch das <a href=\"http:\/\/www.w3.org\/2010\/05\/video\/mediaevents.html\">HTML5 Media API<\/a> geregelt. Folgendes Skript erm\u00f6glicht die Steuerung mit der Leertaste und l\u00e4dt den Film erneut nach Ende:<\/p>\n<pre>&lt;script type=\"text\/javascript\"&gt;\r\n  (function(){\r\n    \/\/ Video am Ende neu laden\r\n    var video = document.getElementsByTagName('video')[0];\r\n    video.addEventListener('ended', function() {\r\n      video.load();\r\n    });\r\n    \/\/ Play\/Pause mit Leertaste bedienen\r\n    window.addEventListener('keydown', function(event) {\r\n      if(event.keyCode === 32) {\r\n        if(video.paused) {\r\n          video.play();\r\n        }\r\n        else {\r\n          video.pause();\r\n        }\r\n        event.preventDefault();\r\n      }\r\n    });\r\n  })()\r\n&lt;\/script&gt;<\/pre>\n<p>Wichtig ist hier <code>event.preventDefault()<\/code>; ohne dies wird die Leertaste nach dem Skript an die Seite weitergereicht, mit h\u00e4\u00dflichem hoch- und runterspringen.<\/p>\n<p>Um die Steuerleiste auszublenden kann man derzeit nur das <code>controls<\/code> Attribut von der <code>video<\/code> Tag entfernen. Das <code>controls<\/code> Attribut enth\u00e4lt alle Eingabeelemente, die auf der Video Oberfl\u00e4che (engl. canvas) liegen. Das Ausblenden w\u00fcrde demnach den mittigen Abspielknopf mit sich ziehen, und der Film kann nicht gestartet werden. An dieser Stelle sollte man sich mit weiteren Optimierungs\u00adversuchen zur\u00fcckhalten und hoffen, da\u00df das W3C und Web-Autoren sich damit befassen (obwohl die HTML5 Media API schon fertig im RFC-Stadium ist).<\/p>\n<hr \/>\n<p class=\"credit\">Videoclip von <a href=\"http:\/\/nature.disney.com\/oceans\">Disney Nature&#8217;s Oceans<\/a> via Videojs.com. Warenzeichen und Urheberrechte liegen bei ihren jeweiligen Inhabern.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Eine Anfrage zum Einf\u00fcgen eines Filmclips auf einer Webseite schickte mich neulich auf die Suche nach einer L\u00f6sung die alle modernen Browser unterst\u00fctzt. Ein neueres JavaScript-Paket, videojs.com, bot sich an, besonders wegen der aktiven Enwicklung. Anfangs schien es perfekt, dann gab es Schwierigkeiten mit der Benutzung. Ich wollte Abspielen und Pause mit der Leertaste ausl\u00f6sen, [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[],"class_list":["post-39","post","type-post","status-publish","format-standard","hentry","category-html5"],"_links":{"self":[{"href":"https:\/\/bitpals.com\/de\/wp-json\/wp\/v2\/posts\/39","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bitpals.com\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/bitpals.com\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/bitpals.com\/de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bitpals.com\/de\/wp-json\/wp\/v2\/comments?post=39"}],"version-history":[{"count":0,"href":"https:\/\/bitpals.com\/de\/wp-json\/wp\/v2\/posts\/39\/revisions"}],"wp:attachment":[{"href":"https:\/\/bitpals.com\/de\/wp-json\/wp\/v2\/media?parent=39"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/bitpals.com\/de\/wp-json\/wp\/v2\/categories?post=39"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/bitpals.com\/de\/wp-json\/wp\/v2\/tags?post=39"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}