Video Events und Controls (Videos steuern)

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);

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>

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);