如何在HTML視頻達到某個特定時間時觸發事件？

Question

我想知道這是否可能，如果是的話，它將如何完成。所以，我有我的網頁

<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來做到這一點嗎？

Answer 1

如何在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>

Answer 2

也許你可以嘗試使用計時器內的視頻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; 
     } 
    }); 
}; 

你認爲這是否行得通呢？