Wiedergabesteuerung des HTML5-Video-Tags

In diesem Artikel wird hauptsächlich die Wiedergabesteuerung des HTML5-Video-Tags vorgestellt. In diesem Artikel wird erläutert, wie Sie die Gesamtdauer des Videos ermitteln, abspielen, anhalten, die Wiedergabezeit des Videos ermitteln, den Wiedergabepunkt festlegen, abrufen und festlegen Lautstärke usw. Freunde, die es benötigen, können es als Referenz verwenden:

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 zum Bedienen des Video-Tags, d die Erweiterung des Players.

Inhaltsverzeichnis dieses Artikels:

1. Gesamtdauer des Videos abrufen
2. Abspielen Zeit des Videos und legen Sie den Abspielpunkt fest
4. Erfassung und Einstellung der Lautstärke

Ermitteln Sie zunächst die Gesamtdauer des Videos

Um den Player zu bedienen (Video), als Erstes werden einige Informationen zum Video angezeigt, darunter die Gesamtdauer. Neben dem Inhalt wird auch als Erstes die Gesamtdauer angezeigt. Fügen Sie vor dem Ausführen des Videos eine ID zum Video-Tag hinzu, damit wir das Videoelement erhalten können.

<video id="myVideo" controls preload="auto" width=300 height="165" 
     poster="http://img0.ph.126.net/I10JqUUJDmlEtE_XYl4hOg==/6608842237655242020.jpg" 
     src="http://www.w3cschool.cc/try/demo_source/mov_bbb.mp4">
    </video>

Nachdem wir eine ID festgelegt haben, können wir den Vorgang starten. Um die Gesamtdauer zu erhalten, müssen wir Video An verwenden Ereignis - geladene Metadaten. Das Auslösen dieses Ereignisses zeigt an, dass die Metadaten (einige grundlegende Informationen des Mediums) geladen wurden. Verwenden Sie addEventListener, um auf das Ereignis zu warten Die erhaltene Gesamtdauer beträgt Sekunden. Konvertieren Sie sie bei der Anzeige nach Bedarf.

Zweitens: Abspielen und Anhalten

Die grundlegendste Funktion des Players ist Abspielen und Anhalten, und nachdem die Gesamtdauer ermittelt wurde, ist der nächste Vorgang Abspielen und Anhalten . Die beiden derzeit verwendeten Videomethoden sind Wiedergabe und Pause

var myVideo = document.getElementById('myVideo');//获取video元素
myVideo.addEventListener("loadedmetadata", function(){
    //要执行的代码
});
     好了，已经监听了，那么接下来要做的就是获取总时长，其实就是一个属性-duration
var myVideo = document.getElementById('myVideo')//获取video元素
    ,tol = 0
;
myVideo.addEventListener("loadedmetadata", function(){
    tol = myVideo.duration;//获取总时长
});

Es ist zu beachten, dass das Ausführen der Wiedergabemethode nach dem Ende der Wiedergabe das Video von Anfang an abspielt.

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 es dauert das Video abgespielt wurde, wann abgespielt wird. Dieser Vorgang ist dem Abrufen der Gesamtdauer sehr ähnlich. Er erfordert die Überwachung eines Ereignisses und das Abrufen des Werts eines Attributs. Anschließend werden das timeupdate-Ereignis und das currentTime-Attribut des Videos verwendet wird auf der Konsole angezeigt. Wir sehen viele Daten... Wir erhalten oft eine Anfrage, das heißt, es ist 10 Minuten her, als wir es das letzte Mal gesehen haben In der zehnten Minute müssen wir nun den Wiedergabepunkt festlegen. Das Attribut currentTime ist lesbar und beschreibbar Sekunden. Wenn der Wiedergabepunkt nicht in Sekunden angegeben ist, muss er umgerechnet werden

var myVideo = document.getElementById('myVideo')//获取video元素
    ,tol = 0
;
myVideo.addEventListener("loadedmetadata", function(){
  tol = myVideo.duration;//获取总时长
 });</p>
<p> //播放
 function play(){ 
     myVideo.play();
 }</p>
<p> //暂停
 function pause(){ 
     myVideo.pause();
 }

Viertens: Lautstärkeerfassung und -einstellung

Der Player kann währenddessen pausieren und abspielen Wenn Sie die Wiedergabe abspielen, wissen Sie, wo gerade abgespielt wird, und können ab einem bestimmten Zeitpunkt mit der Wiedergabe beginnen. Als nächstes müssen Sie die Lautstärke einstellen. 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

//播放时间点更新时
myVideo.addEventListener("timeupdate", function(){
   var currentTime = myVideo.currentTime;//获取当前播放时间
   console.log(currentTime);//在调试器中打印
});

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

//设置播放点
function playBySeconds(num){ 
    myVideo.currentTime = num;
}

Das Folgende ist der vollständige Code:

//音量改变时
myVideo.addEventListener("volumechange", function(){
   var volume = myVideo.volume;//获取当前音量
   console.log(volume);//在调试器中打印
});

Zusammenfassung: Verwenden Sie diese vier Schritte, um die grundlegenden Vorgänge des HTML5-Tag-Videos (Players) zu verstehen. Diese Vorgänge werden hauptsächlich über JS ausgeführt, um Videoereignisse zu überwachen und Videoattribute zu lesen und zu schreiben Vier Punkte ermöglichen es Ihnen, den Player flexibel zu nutzen und je nach Anwendungsszenario anzupassen.

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.

Verwandte Empfehlungen:

Verwenden Sie HTML5 Canvas-Methode zum Zeichnen von Polygonen wie Dreiecken und Rechtecken

Über die Kontrollanalyse der neuen H5-Attribute Audio und Video

Das obige ist der detaillierte Inhalt vonWiedergabesteuerung des HTML5-Video-Tags. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!