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

Question

我想知道这是否可能，如果可能，如何实现。所以我的页面上有一个 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 才能执行此操作？

Answer 1

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

使用currentTime and timeupdate观看演示同时使用两者。

but I don't know if JavaScript has an "ontimemark(2)" type of event listener that I can set up.

时间更新

Will I have to create a setInterval to do this?

不，请参阅下面的代码段。

• 每个 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>