CSS, HTML und Javascript mit {stil}

Javascript und HTML5 Video

Video Events

HTML5 machts möglich: der eigene Video-Player mit einem individuellen Design.

Das HTML5-video-Tag hat Flash als führende Video-Plattform vom Thron gestürzt. Mit HTML5-Video können wir Video ohne Plugins einsetzen und mit dem Javascript-Api für HTML5-Video das Video steuern.

Dank der Events und Methoden können wir Video-Player aus HTML, Javascript und CSS zusammenstellen. Javascript bringt Events für Video wie onplaying, onpause und onended und wir bekommen zusätzliche Steuerelemente wie Rewind und Fast Forward.

myvideo.canPlayType fragt den Browser ab, ob er den Videotyp abspielen kann.

canMP4  = myvideo.canPlayType('video/mp4; codecs="avc1.42E01E"')
canWebm = myvideo.canPlayType('video/webm; codecs="vp8, vorbis"');
canOgg  = myvideo.canPlayType('video/ogg; codecs="theora"')

Eigener Video-Player

Dieser Player besteht aus einfachem SVG für die Tasten Play/Stop, Rewind und Fullscreen. Das SVG kann direkt in den HTML-Code des Players integriert werden. Der letzte Browser, der HTML5 und SVG nicht beherrscht, ist Internet Explorer 8 – und der liegt jetzt in den letzten Zügen.

<rect style="fill:green;fill-opacity:0.1" id="invisBack" />
<rect style="fill:red;fill-opacity:0.1"   id="invisPlay" />
<rect style="fill:blue;fill-opacity:0.1"  id="invisFullScreen" />
<script type="text/javascript">
window.addEventListener('load',myVideo,true);
   
function myVideo() {
   var seePlay = true; 
   var theVideo = document.getElementById('theVideo');
   var invisPlay = document.getElementById('invisPlay');
   var invisBack = document.getElementById('invisBack');
   var invisFullScreen = document.getElementById('invisFullScreen');
   invisPlay.addEventListener ('click',function() {
      if (seePlay === true) {
         theVideo.play();seePlay = false;
         document.getElementById('viPause').setAttribute('opacity','1');
         document.getElementById('viPlay').setAttribute('opacity','0');
      } else {
         theVideo.pause();seePlay = true;
         document.getElementById('viPause').setAttribute('opacity','0');
         document.getElementById('viPlay').setAttribute('opacity','1');
      }
   },true);
   
   document.getElementById('invisBack').addEventListener ('click', function() {
      theVideo.currentTime = 0;seePlay = true;theVideo.pause();
   },true);
   
   document.getElementById('invisFullScreen').addEventListener ('click', function () {
      if (theVideo.requestFullscreen) {
         theVideo.requestFullscreen();
      } else if (theVideo.webkitRequestFullscreen) {
         theVideo.webkitRequestFullscreen();
      } else if (theVideo.mozRequestFullscreen) {
         theVideo.mozRequestFullscreen();
      } else if (theVideo.mozRequestFullScreen) {
         theVideo.mozRequestFullScreen();
      } else if (theVideo.msRequestFullscreen) {
         theVideo.msRequestFullscreen();
      }
   },true);
   
   document.getElementById('theVideo').addEventListener ('ended', function () {
      seePlay = true;
      document.getElementById('viPause').setAttribute('opacity','0');
      document.getElementById('viPlay').setAttribute('opacity','1');
   });
}
</script>