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.

Will man einen Player, der in allen Browsern einen einheitlichen Look hat, 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. Die Programmierung mit Javascript ist bei Audio Video fast identisch. Wenn ihr so einen einheitlichen Player für eure Videos erstellen wollt, schaut euch mein Audio Tutorial an.

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

Elemente einfügen

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.

Video abspielen und pausieren

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

Abfragen ob Video abspielt

siehe Beispiel

Hier geht es darum, dass man mit einem Button ein Video startet, abspielt, pausiert und weiterlaufen lässt.

Dazu muss man abfragen, ob das Video läuft. Leider gibt es keine Eigenschaft wie playState und einem Wert running, die angibt, ob das Video läuft, aber man kann sich behelfen, indem man abfragt ob das Video pausiert wurde.

video.paused

Die Eigenschaft paused liefert einen boolschen Wert. So kann man video.play() oder video.pause() von diesem Wert abhängig machen.

Wenn man das Video jedoch zum ersten mal startet, ist video.paused = false. Deswegen habe ich eine globale Variable eingefügt started, die mittels boolschem Wert angibt, ob das Video gestartet wurde. Nun kann man in einer if() Struktur Starten, Abspielen und Pausieren mit einem Button steuern.

var vid = document.getElementById("videoElement");
var videoBtn = document.getElementById("videoBtn"); 

videoBtn.addEventListener("click", pausePlay);

var started = false;
    
function pausePlay() {
    if(!started){
       vid.play();
        started = true;
        videoBtn.innerText = "Pause";
    }else if(!vid.paused){
        vid.pause(); 
        videoBtn.innerText = "Play";
    }else if(vid.paused){
        vid.play();
        videoBtn.innerText = "Pause";
    }
  
}

Wenn man eine klassische Abspielsteuerung haben möchte mit einem Startbutton, einem Pausieren-, Playbutton und einem Stopbutton, kann man das Beispiel auf folgende Art abändern:

siehe Beispiel mit 3 Buttons Start, Pause/Play, Stop

siehe Beispiel mit 2 Buttons: Start/Stop, Pause/Play

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

Video Wiedergabegeschwindigkeit ändern

Siehe dazu auch Developer Mozilla

Die Wiedergabegeschwindigkeit beim Video ändert man genauso wie bei einem Audio Element.
video.playbackRate Ein Wert von 0 bis 1 oder höher wird erwartet. Dabei bildet 1 die normle Geschwindigkeit.

Pitch Tonhöhe

Lässt man Sound schneller ablaufen ändert sich normalerweise die Tonhöhe. Dabei ist egal ob der Sound innerhalb einer Videodatei oder eines Audio Elements läuft.
Mittels media.preservesPitch lässt sich das mittels einem boolschen Wert an- oder abstellen.
Für Mozilla Browser verwendet man media.mozPreservesPitch Hierbei steht media für das Video oder Audio Element. In diesem Beispiel wird true oder false mit einer Checkbox eingestellt.

Beipspiel

HTML

<video  width="350" height="300"  id="video" loop src="movi/tiere_sound.mp4" controls> </video>
<div>
<label for="rate">Abspielgeschwindigkeit:</label>
<input id="rate" type="range" min="0.25" max="3" step="0.05" value="1">           
</div>
<div>
  <label for="pitch">Tonhöhe beibehalten:</label>
  <input type="checkbox" id="pitch" name="pitch" checked>
</div>

Javascript

const video = document.getElementById("video");
const rate = document.getElementById("rate");
const pitch = document.getElementById("pitch");    

rate.addEventListener("input", speedRate);

function speedRate(){
    video.playbackRate = rate.value;
} 

pitch.addEventListener("change", setPitch);
     
function setPitch(){
  if ('preservesPitch' in video) {
    video.preservesPitch = pitch.checked;
  } else if ('mozPreservesPitch' in video) { //deprecated
    video.mozPreservesPitch = pitch.checked;
  }    
}

Javascript Tipps