Studiennotizen zum HTML5-Video-Tag (Player) (2): Wiedergabesteuerung_HTML5-Tutorialfähigkeiten

Im vorherigen Artikel wurden einige Arbeiten vorgestellt, die zum Initialisieren des HTML5-Tag-Videos (Players) durchgeführt werden müssen, und wie der HTML5-Player einfach und schnell verwendet werden kann. Dieser Artikel konzentriert sich auf die Verwendung von JS So bedienen Sie das Video-Tag und erfahren, wie Sie einige einfache und grundlegende Vorgänge am Video ausführen, darunter das Abspielen und Anhalten des Players, das Lesen und Einstellen der Lautstärke sowie andere schreibbezogene Vorgänge, wodurch die Erweiterung des Players gestartet wird.

Inhaltsverzeichnis dieses Artikels:

1. Ermitteln Sie die Gesamtdauer des Videos
2. Abspielen und anhalten
3. Ermitteln Sie die Wiedergabezeit des Videos und legen Sie den Abspielpunkt fest
4. Ermitteln Sie die Lautstärke und stellen Sie sie ein

Ermitteln Sie zunächst die Gesamtdauer des Videos

Bei der Bedienung des Players (Video) müssen zunächst einige Informationen zum Video abgerufen werden, darunter auch die Gesamtdauer. Neben dem Inhalt wird als Erstes auch die Gesamtdauer angezeigt . Fügen Sie vor der Bedienung des Videos eine ID zum Video-Tag hinzu, damit wir das Videoelement problemlos erhalten können

Code kopieren

Der Code lautet wie folgt:

Nachdem Sie eine ID festgelegt haben, können Sie den Vorgang starten. Um die Gesamtdauer zu erhalten, müssen Sie ein Ereignis des Videos verwenden – geladene Metadaten. Das Auslösen dieses Ereignisses zeigt an, dass die Metadaten (einige grundlegende Informationen des Mediums) vorhanden sind wurde geladen. Verwenden Sie addEventListener Listening-Ereignisse

Code kopieren

Der Code lautet wie folgt:

var myVideo = document.getElementById( 'myVideo');//Holen Sie sich das Videoelement
myVideo.addEventListener("loadedmetadata", function(){
//Auszuführender Code
});
Okay, es ist bereits angehört. Als nächstes müssen Sie die Gesamtdauer ermitteln, die eigentlich eine Attributdauer ist
var myVideo = document.getElementById('myVideo')//Get the video element
,tol = 0
;
myVideo.addEventListener("loadedmetadata", function(){
tol = myVideo.duration;//Erhalten Sie die Gesamtdauer
});

Es ist zu beachten, dass die Einheit der ermittelten Gesamtdauer Sekunden ist, die bei der Anzeige nach Bedarf umgerechnet werden sollte. 

Zweitens: Abspielen, Pause

Die grundlegendste Funktion des Players ist „Wiedergabe und Pause“. Nach Erreichen der Gesamtdauer ist die nächste Operation „Wiedergabe und Pause“. Die beiden derzeit verwendeten Videomethoden sind Wiedergabe und Pause

Kopieren Sie den Code

Der Code lautet wie folgt:

var myVideo = document.getElementById('myVideo')//Get the video element
, tol = 0
;
myVideo.addEventListener("loadedmetadata", function() {
tol = myVideo.duration;//Erhalten Sie die Gesamtdauer
});

//Play
function play(){
myVideo.play();
}

//Pause
function pause(){
myVideo.pause();
}

Es ist zu beachten, dass die Wiedergabemethode nach der Wiedergabe ausgeführt wird abgeschlossen ist, wird von Anfang an gespielt.

Drittens ermitteln Sie die Wiedergabezeit des Videos und legen den Wiedergabepunkt fest

Nachdem der Player abspielen und anhalten kann, müssen Sie als Nächstes sehen, wie lange das Video bereits abgespielt wurde und zu welchem ​​Zeitpunkt es abgespielt wurde. Dieser Vorgang ist dem Abrufen der Gesamtdauer sehr ähnlich. Er erfordert das Abhören eines Ereignisses und das Abrufen des Werts eines Attributs. Dann werden das timeupdate-Ereignis und das currentTime-Attribut des Videos verwendet 🎜>
Code kopieren

Der Code lautet wie folgt://Wenn der Wiedergabezeitpunkt aktualisiert wirdmyVideo.addEventListener("timeupdate" , function(){

var currentTime = myVideo.currentTime;//Erhalten Sie die aktuelle Wiedergabezeit

console.log(currentTime);//Im Debugger drucken

});


Nach dem Ausführen sehen Sie viele Daten auf der Konsole...

Wir erhalten oft eine Anfrage, das heißt, es sind 10 Minuten vergangen, seit wir es das letzte Mal gesehen haben. Dann müssen wir den Abspielpunkt zu diesem Zeitpunkt festlegen Das Attribut „currentTime“ wird weiterhin zum Festlegen des Abspielpunkts verwendet. Das Attribut „currentTime“ ist lesbar und beschreibbar. Es ist zu beachten, dass die Einheit des eingestellten Werts nicht in Sekunden angegeben ist, sondern umgerechnet werden muss

Kopieren Sie den Code Der Code lautet wie folgt:

//Stellen Sie den Abspielpunkt ein
function playBySeconds(num){
myVideo.currentTime = num;
}

Viertens: Ermitteln und Einstellen der Lautstärke

Der Player kann während des Wiedergabevorgangs pausieren und abspielen. Er weiß, wo er gerade abspielt, und kann ab einem bestimmten Zeitpunkt mit der Wiedergabe beginnen. Dies ähnelt dem dritten Punkt. Sie können das Volumenattribut direkt verwenden, um das Volumen zu erhalten. Was wir hier jedoch auch einführen werden, ist das Auslöseereignis für die Lautstärkeänderung ist das volumechange-Ereignis

Code kopierenDer Code lautet wie folgt:

/ /Wenn sich die Lautstärke ändert
myVideo.addEventListener("volumechange" , function(){
var volume = myVideo.volume;//Die aktuelle Lautstärke abrufen
console.log(volume);//Drucken in der Debugger
});

Wenn Sie die Lautstärke über die Steuerleiste ändern, werden im Debugger viele Daten angezeigt. Es ist zu beachten, dass der Lautstärkebereich zwischen 0 und 1 liegt und in der Benutzeroberfläche im Allgemeinen Prozentsätze verwendet werden, sodass bei Bedarf eine Konvertierung erforderlich ist.
Die Lautstärke kann durch Ändern des Attributs eingestellt werden, was dem Wiedergabezeitpunkt ähnelt, mit der Ausnahme, dass die Lautstärke mit dem Lautstärkeattribut

eingestellt wird Code kopieren Der Code lautet wie folgt:

//Stellen Sie die Lautstärke ein
function setVol(num){
myVideo.volume = num;
}

Das Folgende ist der vollständige Code:

Kopieren Sie den CodeDer Der Code lautet wie folgt:

poster="http://img0.ph.126.net/I10JqUUJDmlEtE_XYl4hOg==/6608842237655242020.jpg"
src=" http://www.w3cschool.cc/try /demo_source/mov_bbb.mp4">

<script><br>var myVideo = document.getElementById('myVideo')/ /Das Videoelement abrufen <br> ,tol = 0 //Gesamtdauer<br>;<br>myVideo.addEventListener("loadedmetadata", function(){<br> tol = myVideo.duration;//Gesamtdauer abrufen <br>});</p> <p>//Play<br>function play(){ <br> myVideo.play();<br>}</p> <p>//Pause<br>function pause(){ <br> myVideo.pause();<br>}</p> <p>//Wenn der Wiedergabezeitpunkt aktualisiert wird<br>myVideo.addEventListener("timeupdate", function(){<br> var currentTime = myVideo.currentTime;//Erhalten Sie die aktuelle Wiedergabezeit<br> Konsole. log(currentTime );//Im Debugger drucken<br>});</p> <p>//Abspielpunkt festlegen<br>function playBySeconds(num){ <br> myVideo.currentTime = num;<br>}</p> <p>//Wenn sich die Lautstärke ändert<br>myVideo.addEventListener("volumechange", function(){<br> var volume = myVideo.volume;//Die aktuelle Lautstärke abrufen<br> console.log(volume) ;/ /Im Debugger drucken<br>});</p> <p>//Lautstärke einstellen<br>function setVol(num){ <br> myVideo.volume = num;<br>}<br></script>

< ;/html>

Zusammenfassung: Verwenden Sie diese vier Schritte, um die grundlegenden Vorgänge des HTML5-Tag-Videos (Players) zu verstehen. Diese Vorgänge dienen hauptsächlich der Überwachung von Videoereignissen und der Manipulation von Videoattributen über JS Vervollständigt durch Lesen und Schreiben. Wenn Sie mit diesen vier Punkten vertraut sind, können Sie den Player flexibel nutzen und ihn dann entsprechend dem Anwendungsszenario anpassen.