Video Events und Controls (Steuerung oder Steuer Elemente)

Javascript für Video

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.

18-12-15 SITEMAP CSS HTML JS Basis JS Web Tutorial SVG

canPlayType

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

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


		


		

loadedmetadata: Metadaten des Videos

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

timeupdate: abgelaufene Spielzeit

video.addEventListener("timeupdate", function () {  
   const played = video.currentTime;
   const 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: Zurück zum animierten GIF

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.

Animierte GIFs waren der Charme der 90er Jahre, heute sind sie fast ausgestorben. Auch wenn wir ein animiertes GIF auf einer Webseite sehen, können wir nicht sicher sein, dass dahinter kein Video steckt: Animierte GIFs sind ein teures Vergnügen in Hinsicht auf das Datenvolumen der mobilen Geräte, während kleine Videos leichte Kost darstellen.

Aber anders als GIF werden Videos auf dem iPhone automatisch im Player abgespielt und nicht in der Webseite. Seit iOS 10 geht es aber auch anders: Das playsinline-Attribut des Videos läßt das Video inline im Layout und weil das Video keine Audio-Spur hat, darf es wie einst ein GIF-Film automatisch starten.

<video preload="metadata" 
       poster="runbaby.png" 
       playsinline 
       autoplay
       loop
       src="runbaby.mp4">
</video>
00:00 00:00
window.addEventListener ("load", function () {
   const video = document.querySelector("#videovertical");
   const play = document.querySelector("#play");
   const pause = document.querySelector("#pause");
   const rewind = document.querySelector("#rewind");
   play.addEventListener ("click", function () {
      video.play();
   });
   pause.addEventListener ("click", function () {
      video.pause();
   });
   rewind.addEventListener ("click", function () {
      video.currentTime = 0;
   });
   
   video.addEventListener("loadedmetadata", function () {
      const duration = video.duration.toFixed(1);
      document.querySelector("#toend").textContent = duration;
   }, false);
   
   video.addEventListener("timeupdate", function () {
      const played = video.currentTime;
      const duration = video.duration.toFixed(1);
      document.querySelector("#played").textContent = played.toFixed(2);
      document.querySelector("#range").setAttribute("d", "m 21,130 l " + played.toFixed(2) * 210/duration + " ,0" )
   }, false);
}, false);