如何在HTML视频达到某个特定时间时触发事件？

我想知道这是否可能，如果是的话，它将如何完成。所以，我有我的网页如何在HTML视频达到某个特定时间时触发事件？

<video id="ssvid"> 
     <source src="assets/Cisco_SmartStack_04012016_NoText_2.mp4" type="video/mp4" /> 
</video>

上的HTML5视频，让说，我想功能，在2-被调用，13-和视频播放的15秒的痕迹。我想创建

$(function(){ 
    window.VidHandler = (function(divid){ 
     this.divid = divid; 
     this.PauseFunctions = [ 
      { 
       SecondMark: 2, 
       OnSlideTo: function() { }, 
       OnSlideAway: function() { } 
      }, 
      { 
       SecondMark: 13, 
       OnSlideTo: function() { }, 
       OnSlideAway: function() { } 
      }, 
      { 
       SecondMark: 15, 
       OnSlideTo: function() { }, 
       OnSlideAway: function() { } 
      } 
     ]; 
    })("ssvid"); 
});

的对象，但我不知道，如果JavaScript有一个"ontimemark(2)"类型，我可以设置事件监听器。我需要创建一个setInterval来做到这一点吗？

来源

2016-04-06 Subpar Web Dev

什么的'dvid'应该是什么？ – zer00ne

如何在HTML视频达到某个时间标记时触发事件？

使用currentTime and timeupdate看演示利用两者。

但我不知道JavaScript是否有我可以设置的“ontimemark（2）”类型的事件侦听器。

timeupdate

我将不得不创建一个的setInterval做到这一点？

不，请参阅代码段以下。

每timeupdate事件触发的console.log
vidHandler()使用switch火在第二标记2，13，和15
您可以使用幻灯片方式更换console.log秒。
从外表看，currentTime看起来更像1sec = 3.5sec？或者视频元素的报告持续时间不准确。

片段

var ssvid = document.getElementById('ssvid'); 
 
    var tick = ssvid.currentTime; 
 

 
    ssvid.addEventListener('timeupdate', function(e) { 
 
    console.log('currentTime: ' + tick); 
 
    tick++ 
 
    vidHandler(tick); 
 
    }, false); 
 

 

 
    function vidHandler(time) { 
 
    switch (time) { 
 
     case 2: 
 
     console.log('2 second mark'); 
 
     break; 
 
     case 13: 
 
     console.log('13 second mark'); 
 
     break; 
 
     case 15: 
 
     console.log('15 second mark'); 
 
     break; 
 

 
     default: 
 
     return false; 
 
    } 
 
    }

<script src="http://gh-canon.github.io/stack-snippet-console/console.min.js"></script> 
 

 
<video id="ssvid" controls width="300"> 
 
    <source src="http://glpjt.s3.amazonaws.com/so/av/vs34s3.mp4" type="video/mp4" /> 
 
</video>

来源

2016-04-06 01:18:01 zer00ne

也许你可以尝试使用计时器内的视频currentTime属性。还应该有一个progress事件。这是本文档中列出： https://www.w3.org/2010/05/video/mediaevents.html

像这样的东西可能工作：

// maybe you can select this by id in jQuery rather than DOM 
var video = document.getElementsByTagName('video')[0], 
    lastPf // reference for slide away; 

video.onprogress = function() { 
    PauseFunctions.forEach(function(pf) { 
     if (video.currentTime > pf.SecondMark) { 
      if (lastPf !== undefined) { 
       // slide away the previous thing 
       lastPf.OnSlideAway(); 
      } 

      // slide to the new one 
      pf.OnSlideTo(); 
      lastPf = pf; 
     } 
    }); 
};

你认为这是否行得通呢？

来源

2016-04-06 01:02:20

我尝试在我的实验中使用'$（'ssvid'）。on（'progress'，...）'，但它不起作用。虽然这可能会更好。 –

如何在HTML视频达到某个特定时间时触发事件？

回答

相关问题