CSS, HTML und Javascript mit {stil}

Video Events und Controls

Video steuern und stylen mit eigenen Play, Stop, Rewind-Elementen

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.

Mit HTML-Video können wir Video ohne Plugins einsetzen und mit Javascript-Events steuern.

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

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





loadedmetadata: Metadaten des Videos

video.addEventListener("loadedmetadata", function () {
   var duration = video.duration.toFixed(1);
   infor.innerHTML += "Dauer " + duration;
}, false);

timeupdate: abgelaufene Spielzeit

video.addEventListener("timeupdate", function () {  
   var played = video.currentTime;
   var duration = video.duration.toFixed(1);
   document.querySelector("#videoplayed").innerHTML = "Abgespielt bis " + played.toFixed(1);
   document.querySelector("#videoplayed").innerHTML += "Zeit bis Ende " + (duration - played).toFixed(1);
}, false);

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>
5 video