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

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

你认为这会奏效吗？

Answer 2

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

使用currentTime and timeupdate，请参阅演示文稿同时使用两者。

但我不知道JavaScript是否有＆＃34; ontimemark（2）＆＃34;我可以设置的事件监听器的类型。

timeupdate

我是否必须创建一个setInterval才能执行此操作？

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

每个timeupdate事件都会触发console.log
vidHandler()使用switch触发第二个标记2,13和15.
您可以使用幻灯片方法替换console.log。
根据它的看法，currentTime看起来更像1sec = 3.5sec？或者报告的视频元素持续时间不准确。

<强>段

＆＃13;

  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;
    }
  }

＆＃13;

<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>

＆＃13;

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

2 个答案: