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.
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
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>
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.
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
<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">
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(); }
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(); }
Mit der Eigenschaft src kann man die Quelle des Videos festlegen.
video.src = "videoOrdner/meinVideo.mp4";
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); } }
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); } }
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.
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.
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; } }