Javascript Video Events und Controls

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

SUPPORTS video/mp4; codecs='avc1.42E01E'
SUPPORTS video/webm; codecs="vp8, vorbis"

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

Übersicht: Events für Video

Event	Beschreibung
`play`	löst aus, wenn das Video abgespielt wird
`pause`	löst aus, wenn das Video pausiert
`canplay`	wenn genug Daten geladen sind, dass das Abspielen des Videos beginnen kann
`playing`	wenn genug Daten geladen sind, dass das Abspielen des Videos beginnen kann
`oncanplaythrough`	Tritt ein, wenn das Video gestartet wurde
`ended`	löst aus, wenn das Video zu Ende abgespielt ist
`timeupdate`	wird ohne Unterbrechung ausgelöst, während das Video läuft (für Fortschrittsanzeigen)
`seeked`	wenn der Benutzer die Position im Video verändert hat
`volumechange`	wenn die Lautstärke oder Stummschaltung geändert wird
`loadedmetadata`	wenn Metadaten (Dauer, Größe) geladen sind
`waiting`	wenn das Video stopt, weil es den nächsten Frame puffern muss
`error`	Falls ein Problem auftritt (z. B. Datei nicht gefunden).

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