当HTML5< video>时在Javascript中检测循环重启？ [英] Detect in Javascript when HTML5 <video> loop restarts?

问题描述

我有一个使用< video loop =true> 的循环HTML5视频，我想知道视频何时循环播放。事件监听器 play 仅在最初启动视频时触发，结束从不触发。

timeupdate 的不精确性使我很紧张使用 if（v.currentTime< = 0），但似乎确实有效。有没有更好的方法来检测视频何时重启？

这是我的基本设置：

 < video autoplay =trueloop =truemuted =true> 
< source src =vidoe.mp4type =video / mp4> 
< source src =video.webmtype =video / webm> 
< source src =video.ogvtype =video / ogg> 
< / video> 
< div id =Video-Time>< / div> 
 
< script> 
 var v = document.getElementsByTagName（'video'）[0] 
 var t = document.getElementById（'Video-Time'）; 
 
 v.addEventListener（'timeupdate'，function（event）{
 t.innerHTML = v.currentTime; 
 if（v.currentTime< = 0）{console。 log（Beginning！）;} //循环时触发，令人惊讶的是
}，false）; 
 v.addEventListener（'play'，function（）{
 console.log（play！）; //仅在视频最初开始播放时触发，而不是在循环重启
时触发}，假）; 
 v.addEventListener（'ends'，function（）{
 console.log（结束！）; //从未触发
}，false）; 
< / script> 
  

解决方案

我认为最可靠的方法是自己循环。删除循环属性并执行以下操作：

  document.querySelector（'video'）。addEventListener（'ended'，function（）{console.count（'loop restart'）; this.play（）;}） 

 < video autoplay muted src =https://rawgit.com/bower-media -samples /大降压兔子-480P-5S /主/ video.mp4\" >< /视频>  

I have a looping HTML5 video using <video loop="true">, and I want to know when the video loops. The event listener play only fires when the video is started initially, and ended never fires.

The imprecise nature of timeupdate makes me nervous using if ( v.currentTime <= 0 ), but it does seem to work. Is there a better way to detect when the video restarts?

Here's my basic setup:

<video autoplay="true" loop="true" muted="true">
<source src="vidoe.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
<source src="video.ogv" type="video/ogg">
</video>
<div id="Video-Time"></div>

<script>
var v = document.getElementsByTagName('video')[0]
var t = document.getElementById('Video-Time');

v.addEventListener('timeupdate',function(event){
  t.innerHTML = v.currentTime;
  if ( v.currentTime <= 0 ) { console.log("Beginning!"); } // It does trigger when looping, surprisingly
},false);
v.addEventListener('play', function () {
  console.log("play!"); // Only triggered when the video initially starts playing, not when the loop restarts
},false);
v.addEventListener('ended', function () {
  console.log("ended!"); // Never triggered
},false);
</script>

解决方案

I think the most reliable way is to loop it yourself. Remove the loop attribute and do this:

document.querySelector('video').addEventListener('ended', function () {
  console.count('loop restart');
  this.play();
})

<video autoplay muted src="https://rawgit.com/bower-media-samples/big-buck-bunny-480p-5s/master/video.mp4"></video>

这篇关于当HTML5< video>时在Javascript中检测循环重启？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！