Heim > Web-Frontend > H5-Tutorial > So implementieren Sie eine Echtzeitüberwachung der aktuellen Wiedergabezeit in HTML5-Videos (Code)

So implementieren Sie eine Echtzeitüberwachung der aktuellen Wiedergabezeit in HTML5-Videos (Code)

不言
Freigeben: 2018-08-06 17:49:32
Original
7780 Leute haben es durchsucht

In diesem Artikel erfahren Sie, wie Sie eine Echtzeitüberwachung der aktuellen Wiedergabezeit (Code) von HTML5-Videos realisieren können. Ich hoffe, dass er für Sie hilfreich ist.

html:

<video id="video" controls autoplay="autoplay" muted>
	<source src="" type="video/mp4" />
	Your browser does not support the video tag.
</video>
Nach dem Login kopieren

js:

//监听播放时间
var video = document.getElementById(&#39;video&#39;);
//使用事件监听方式捕捉事件
video.addEventListener("timeupdate",function(){
    var timeDisplay;
	//用秒数来显示当前播放进度
	timeDisplay = Math.floor(video.currentTime);
	console.log(Math.floor(video.currentTime))
    //当视频播放到 4s的时候做处理
	if(timeDisplay == 4){
	        //处理代码
	}
},false);
Nach dem Login kopieren

Empfohlene verwandte Artikel:

Analyse von Audio (Audio) in HTML5

Analyse des Video-(Video-)Elements in HTML5

Das obige ist der detaillierte Inhalt vonSo implementieren Sie eine Echtzeitüberwachung der aktuellen Wiedergabezeit in HTML5-Videos (Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage