Ausführliche Erklärung des HTML5-Video-Tag-Betriebsvideos

Dieses Mal werde ich Ihnen eine detaillierte Erklärung des HTML5-Video-Tag-Betriebs Video geben. Was sind die Vorsichtsmaßnahmen für das HTML5-Video-Tag-Betriebsvideo? Werfen wir einen Blick darauf.

In der aktuellen Forschung zur Website-Produktion haben Menschen aus allen Gesellschaftsschichten nicht aufgehört, HTML5 zu verwenden. Unter ihnen ist die Verwendung von HTML5 ein großer Durchbruch Ich glaube, dass viele Leute immer noch nicht wissen, wie man die Wiedergabe steuert. In diesem Artikel werden Ihnen die spezifischen Methoden zur Steuerung der Wiedergabe vorgestellt. Wenn Sie interessiert sind, lassen Sie uns gemeinsam etwas darüber lernen.

Inhalt dieses Artikels:

1. Ermitteln Sie die Gesamtdauer des Videos

2. Abspielen, pausieren

3. Holen Sie sich die Spielzeit des Videos und legen Sie den Abspielpunkt fest

4. Erfassung und Einstellung der Lautstärke

Ermitteln Sie zunächst die Gesamtdauer des Videos

Bei der Bedienung des Players (Video) werden zunächst einige Informationen zum Video angezeigt, darunter auch die Gesamtdauer. Neben dem Inhalt wird auch zunächst die Gesamtdauer angezeigt. Fügen Sie vor der Bedienung des Videos eine ID zum Video-Tag hinzu, damit wir das Videoelement problemlos abrufen 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 -geladene Metadaten des Videos verwenden Medien) geladen wurde, verwenden Sie addEventListener, um auf Ereignisse zu warten

Code kopieren

Der Code lautet wie folgt:

var myVideo = document.getElementById('myVideo');//获取video元素
myVideo.addEventListener("loadedmetadata", function(){
//要执行的代码
});

Okay, nachdem Sie es nun überwacht haben, müssen Sie als Nächstes die Gesamtdauer ermitteln, die eigentlich ein Attribut ist – Dauer

var myVideo = document.getElementById('myVideo')//获取video元素
,tol = 0;
myVideo.addEventListener("loadedmetadata", function(){
tol = myVideo.duration;//获取总时长
});

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

Zweitens: Abspielen und pausieren

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

Code kopieren

Der Code lautet wie folgt:

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

Es ist zu beachten, dass die Wiedergabe von vorne beginnt, wenn die Wiedergabe abgeschlossen ist und dann die Wiedergabemethode ausgeführt wird.

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. Es erfordert das Abhören eines Ereignisses und das Abrufen des Werts eines Attributs. Dann sind das Zeitaktualisierungsereignis des Videos und das Zeitattribut vorhanden gebraucht. Code kopieren

Der Code lautet wie folgt:

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

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

Wir erhalten oft eine Anfrage, das heißt, es sind 10 Minuten vergangen, seit wir das letzte Mal geschaut haben. Dann müssen wir das Attribut currentTime zu diesem Zeitpunkt festlegen Legen Sie den Abspielpunkt fest. Das Attribut „currentTime“ ist lesbar und beschreibbar. Es ist zu beachten, dass die Einheit des Einstellungswerts nicht in Sekunden angegeben ist, sondern umgerechnet werden muss

Viertens: Ermitteln und Einstellen der Lautstärke

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

Der Player kann während des Wiedergabevorgangs pausieren und abspielen. Er weiß, wo sich die Wiedergabe gerade befindet, und kann ab einem bestimmten Zeitpunkt mit der Wiedergabe beginnen. Dieser Punkt ähnelt dem dritten Punkt. Sie können das Volumenattribut direkt verwenden, um die Lautstärke zu ermitteln. In Zukunft müssen Sie die Benutzeroberfläche anpassen Lautstärkeänderungsereignis

Wenn Sie die Lautstärke über die Steuerleiste ändern, werden Sie feststellen, dass im Debugger viele Daten vorhanden sind. Es ist zu beachten, dass der Bereichswert des Volumens zwischen 0 und 1 liegt. Im Allgemeinen wird in der Benutzeroberfläche ein Prozentsatz verwendet, der bei Bedarf konvertiert werden muss.

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

Die Lautstärke kann durch Ändern der Attribute eingestellt werden, was dem Wiedergabezeitpunkt ähnelt, mit der Ausnahme, dass die Lautstärke mit dem Lautstärkeattribut

eingestellt wird Hier ist der vollständige Code:

//设置音量
function setVol(num){ 
myVideo.volume = num;
}

<script>
var myVideo = document.getElementById(&#39;myVideo&#39;)//获取video元素
,tol = 0 //总时长
;
myVideo.addEventListener("loadedmetadata", function(){
tol = myVideo.duration;//获取总时长
});</p> <p>//播放
function play(){ 
myVideo.play();
}</p> <p>//暂停
function pause(){ 
myVideo.pause();
}</p> <p>//播放时间点更新时
myVideo.addEventListener(&quot;timeupdate&quot;, function(){
var currentTime = myVideo.currentTime;//获取当前播放时间
console.log(currentTime);//在调试器中打印
});</p> <p>//设置播放点
function playBySeconds(num){ 
myVideo.currentTime = num;
}</p> <p>//音量改变时
myVideo.addEventListener("volumechange", function(){
var volume = myVideo.volume;//获取当前音量
console.log(volume);//在调试器中打印
});</p> <p>//设置音量
function setVol(num){ 
myVideo.volume = num;
}
</script>

总结：通过这四个步骤来了解html5标签video（播放器）的基本操作，而这些操作主要是通过JS来监听video的事件和对video属性的读写来完成的，熟悉这四点即可灵活的在使用播放器，再根据应用场景来调整即可。       

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

django控件及传参使用详解

Echarts实现动态变色柱状图

jQuery操作textarea输入字数限制

Das obige ist der detaillierte Inhalt vonAusführliche Erklärung des HTML5-Video-Tag-Betriebsvideos. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!