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: 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 () {
	let video = document.querySelector("#videovertical");
	let play = document.querySelector("#play");
	let pause = document.querySelector("#pause");
	let 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 () {
		var duration = video.duration.toFixed(1);
		document.querySelector("#toend").textContent = duration;
	}, false);
	
	video.addEventListener("timeupdate", function () {
		var played = video.currentTime;
		var 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);
5 video