Video Control

Video-Player mit Javascript steuern

Einen Audio oder Videoplayer kann man sehr einfach mit den HTML5 Elementen Audio oder Video erstelen. Die Player werden von den Browsern geliefert und sehen sehr unterschiedlich aus. Gestaltung mit CSS wird bei einigen Browsern kaum unterstützt.

In diesem Tutorial geht es in erster Linie darum per Buttonklick ein bestimmtes Video zu laden und es von einer bestimmten Stelle bis zu einer bestimmten Stelle in Schleife abzuspielen. Siehe letztes Beispiel Es werden im Video Sprungmarken gesetzt und Marken, die den Endzeitpunkt einer Schleife definieren.

Wie in meinem Audio Tutorial wird das Video nicht mit den Controler des Browsers gesteuert, sondern mittels Javascript und eingefügten HTML Elementen wie img, button, input etc. Wenn ihr wissen wollt wie man einen Slider und weitere Elemente des Controllers selbst erzeugt und mit CSS formatiert, schaut euch das Audio Tutorial an.

Will man einen einheitlichen Player kann man die Steuerungselemente mit HTML Elementen wie img, input, button etc. erstellen und diese mit CSS gestalten. Die Funktionalität wird per Javascript erstellt.

Video per Javascript einfügen

Hier wird ein Video Element per Javascript hinzugefügt.
so siehts aus

var vid = document.createElement("video");
vid.setAttribute("src", "movi/fisch.mp4");
document.body.appendChild(vid);
vid.play();

Video per HTML einfügen

Man kann auch das Video per HTML einfügen und dieses über die Id in Javascript ansprechen. Beachte, dass in dieser Variante kein Source Element innerhalb des Video Elements liegt. Stattdessen wurde das src Attribut im video Element eingefügt.
sie siehts aus

HTML

<video width="350" height="300" id="myVideo" loop src="movi/fisch.mp4">
</video>
Javascript
<script>
	var vid = document.getElementById("myVideo");
	vid.play();
</script>

Step by Step Tutorial Videos per Javascript kontrollieren

In der folgenden Schritt für Schritt Anleitung, werden mittels mehrerer Beispiele verschiedene Videos in Schleife abgespielt. Dabei wird Start- und Endzeitpunkt der Scheife definiert.

  1. Video mit PLay und Pause Button
  2. Video mit unterschiedlichen Startzeitpunken
  3. verschiedene Videos mit unterschiedlichen Startzeitpunkten
  4. Optimierung des vorigen Beispiels
  5. unterschiedliche Videos mit Start- und Endzeitpunkt der Schleife

Video abspielen und Stoppen

siehe Beispiel

In den folgenden Beispielen wird ein video HTML Element mit der Id videoElement im Body Bereich eingefügt.
Außerdem gibt es zwei Input Elemente zum Abspielen und Stoppen

HTML

 <video  width="500" height="262"  id="videoElement" loop src="movi/qualle2.mp4">
</video>
<input type="submit" value="play" id="playButton">
<input type="submit" value="pause" id="pauseButton">

Javascript

Die Befehle zum Abspielen und Stoppen lauten
play() und pause()

var vid = document.getElementById("videoElement");
var pauseBtn = document.getElementById("pauseButton"); 
var playBtn = document.getElementById("playButton"); 

pauseBtn.addEventListener("click", pauseVid);
playBtn.addEventListener("click", play);

function play() { 
  vid.play(); 
} 

function pauseVid() { 
  vid.pause(); 
}

Videos mit unterschiedlichen Startzeitpunkten

siehe Beispiel
Man kann den aktuellen Zeitpunkt eines Videos abfragen oder festlegen. Es ist die Eigenschaft

video.currentTime

Die Funktion um das Video ab einem bestimmten Zeitpunkt abzuspielen ist demnach:

function playVideo() { 
vid.currentTime = 5;
vid.play(); 
}

Video Quelle ändern

siehe Beispiel

Mit der Eigenschaft src kann man die Quelle des Videos festlegen.

video.src = "videoOrdner/meinVideo.mp4";

Video Quelle und Startzeitpunkt als Parameter übergeben

siehe Beispiel

Im vorigen Beispiel wurde für jedes Video eine eigene Funktion definiert. Bei einer größeren Anzahl von Videos ist es jedoch weitaus übersichtlicher die Parameter Videoquelle und Startzeitpunkt als Parameter der Funktion zu definieren. Da der Funktionsaufruf über den den Eventlistener jedoch nur eine Referenz auf eine Funktion erlaubt, in der keine Parameter übergeben werden können wird im folgenden eine Callback Funktion erzeugt. Näheres dazu in meinem Tipp Callback Funktion

playBtn3c.addEventListener("click", playVideo("kingJulian.mp4", 9));

function play_Video(vidUrl, time){
    vid.src = vidUrl;
    vid.currentTime = time;
    vid.play(); 
}

function playVideo(vid_Url, _time){
    return function(){
    play_Video(vid_Url, _time);
    } 
}

Video URL Startzeitpunkt Endzeitpunkt Schleife

siehe Beispiel
Nun geht es darum auch das Ende eines Videoausschnitts zu definieren. Wenn das Video an diesem Endzeitpunkt angekommen ist, soll es wieder zum Startzeitpunkt springen und diesen definierten Zeitraum in Schleife abspielen.

Die beiden Parameter Startzeit und Endzeit werden einer globalen Variablen zugewiesen,

var startTime, endTime;

Denn diese Werte werden in einer weiteren Funktion benötigt, welche beim Abspielen des Videos ständig aufgerufen wird mit dem Event siehe w3Schools

video.ontimeupdate

In der Funktion loop wird abgefragt ob der Endzeitpunkt erreicht wurde, um dann den aktuellen Zeitpunkt auf den Startzeitpunkt zu setzen.

var startTime, endTime;
var vid = document.getElementById("videoElement");
var playBtn1 = document.getElementById("play1a");

vid.ontimeupdate = function() {loop()};

function loop() {
	if(vid.currentTime > endTime){
		vid.currentTime = startTime;
    }
}

playBtn1.addEventListener("click", playVideo("laufrad.mp4", 0, 2.5));

	function play_Video(vidUrl, timeStart, timeEnd){
		startTime = timeStart;
		endTime = timeEnd;
		vid.src = videoFolder + vidUrl;
		vid.currentTime = timeStart;
		vid.play(); 
	}

	function playVideo(vid_Url, _timeStart, _timeEnd){
		return function(){
		play_Video(vid_Url, _timeStart, _timeEnd);
		} 
	}

Javascript Tipps