如何在HTML视频达到特定时间标记时触发事件

How to make events fire when an HTML video reaches a certain time mark?

本文关键字：事件 定时间 HTML 视频      更新时间：2024-01-10

我想知道这是否可能，如果可能，该如何实现。所以我的页面上有一个HTML5视频

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

比方说，我希望函数在视频播放的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才能执行此操作吗？

当HTML视频达到某个时间标记时，如何使事件启动？

使用currentTime和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>

也许您可以尝试在计时器中使用视频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;
        }
    });
};

你认为这样行得通吗？

相关文章：