我的JavaScript中的缺陷在哪裏

Question

所以我試圖讓一個對象處理HTML視頻，當它到達特定的第二個標記時使它暫停。每次暫停都會有一些「下一個」按鈕，然後繼續播放視頻。我很好的評論代碼應該讓它更清楚我想要達到的目標。

HTML：

<div class="fancyvid"> 
     <video preload="auto" poster="assets/myposter.png" id="ssvid"> 
      <source src="assets/myvideo.mp4" type="video/mp4" /> 
     </video> 
     <div class="textlayer" data-pauseat="5"> 
      <h1>First pause (5 seconds)</h1> 
      <p>Here's some text for the first pause event</p> 
      <button class="next-btn">Next</button> 
     </div> 
     <div class="textlayer" data-pauseat="11"> 
      <h1>Second pause (11 seconds)</h1> 
      <p>Here's some text for the second pause event</p> 
      <button class="next-btn">Next</button> 
     </div> 
     <div class="textlayer" data-pauseat="15"> 
      <h1>Third pause (15 seconds)</h1> 
      <p>Here's some text for the third pause event</p> 
      <button class="next-btn">Next</button> 
     </div> 
    </div> 
    <div class="button-holder"> 
     <button id="video-play">Play Interactive Video</button> 
     <script type="text/javascript"> 
      $(function(){ 
       $('#video-play').click(function() { 
        VidHandler.PlayFromBeginning(); 
        $(this).remove(); 
       }); 
      }) 
     </script> 
    </div> 

其他JavaScript：

$(function(){ 
    window.VidHandler = (function (vidId) { 

     // refrence to VidHandler for passing into certain scopes 
     var that = this; 

     // get video DOM element 
     this.videlem = $('#' + vidId)[0]; 

     // get container 
     this.$container = $(this.videlem).closest('div.fancyvid'); 

     // get the reused "Next" button 
     this.$nextbtn = this.$container.find('.next-button'); 

     // start tick at zero 
     this.tick = this.videlem.currentTime; 

     // add event listener to video for time events 
     this.videlem.addEventListener('timeupdate',function(e){ 
      console.log('currentTime: ' + that.tick); // TEST 
      var pfunc = that.PauseFunctions[that.tick]; 
      if (pfunc !== undefined) // if there is a pause function corresponding to this second 
      { 
       that.videlem.pause(); 
       pfunc(); 
      } 
      else 
      { 
       ++that.tick; 
      } 
      // 
     }, false); 


     // plays video from beginning 
     this.PlayFromBeginning = function () { 
      this.videlem.currentTime = 0; 
      this.videlem.play(); 
     } 

     // returns a jQuery element of the HTML layer 
     // associated with a particular second mark 
     this.GetLayerElement = function (secondMark) 
     { 
      return this.$container.find('div.textlayer[data-pauseat="' + secondMark + '"]'); 
     } 

     // maps second indices in the video to events 
     // that are called when the video pauses at that second 
     this.PauseFunctions = { 
      5: function() { 
       var $layer = that.GetLayerElement(5);    
       $layer.show(); 
       var $nextbtn = $layer.find('.next-btn'); 
       $nextbtn.click(function() { 
        $layer.hide(); 
        that.videlem.play(); 
       }); 
      }, 
      11 : function() { 
       console.log("The pause function of the event at the 11-second mark was called"); 
      }, 
      15: function() { 
       console.log("The pause function of the event at the 10-second mark was called"); 
      } 

     }; 

     return this; 

    })("ssvid"); 
}); 

我面對目前的主要問題是，我

this.videlem.addEventListener('timeupdate',function(e){ 

事件似乎不會被解僱均勻。

作爲測試，我沒有

var first_millmark = new Date(); 

    // add event listener to video for time events 
    this.videlem.addEventListener('timeupdate',function(e){ 
     console.log('currentTime: ' + that.tick); // TEST 
     console.log("Milliseconds past: " + (new Date() - first_millmark));//TEST 

和輸出是

vidpage.js：23 currentTime的：0 vidpage.js：24毫秒過去：2279

vidpage。 js：23 currentTime：1 vidpage.js：24毫秒過去：2777

vidpage.js：23 currentTime：2 vidpage.js：24毫秒過去：3277

個

vidpage.js：23 currentTime的：3個vidpage.js：24毫秒過去：3527

vidpage.js：23 currentTime的：4個vidpage.js：24毫秒過去：4027個

vidpage.js： 23 currentTime的：5個vidpage.js：24毫秒的過去：4276

vidpage.js：23 currentTime的：5個vidpage.js：24毫秒的過去：4281

哎呀！出了什麼問題？並且是我試圖實現這種模式的完全更好的方式？

Answer 1

任何可以延遲javascript的過程，從內存JS單獨利用到你的電腦速度很慢。

但基於你的問題：

所以我試圖讓通過使 處理的HTML視頻時達到一定的第二標記

它暫停對象

我會懷疑這個函數可以很好地實現這個技巧，我會盡快將它返回，直到您達到了視頻應該暫停的時間點。

如此，例如：

timesToPause=[100,1000,10000]; 

function check_timer(cTime){ //return true 

    if(cTime >= timesToPause[0]){ 
     timesToPause.splice(0, 1); //Remove this timer from timesToPause; 
     pauseVideo(); // whatever your function is to pause the video or run your 
     return true; 
    } 
return false; 
} 

現在，我還沒有完全測試這一點，但代碼應在指定計時器暫停視頻。 例如，如果您在1200秒開始播放視頻，它會暫停視頻兩次，同時觸發兩個定時器100和1000;您可能希望在刪除部分添加一個循環，以防止它跳過它，因此它只會播放一次。

Answer 2

timeupdate不每秒閃光一次：

事件頻率取決於系統負載，但之間將被拋出約4赫茲和66Hz（假設事件處理超過250毫秒不花費更長的時間跑）。我們鼓勵用戶代理根據系統負載和每次處理事件的平均成本來改變事件的頻率，以便UI更新不會比用戶代理在解碼視頻時可以輕鬆處理的頻率更頻繁。

https://developer.mozilla.org/en-US/docs/Web/Events/timeupdate

你需要做的，而不是什麼，是看用在事件打響了currentTime屬性指定的時間，看它是否大於或等於一個暫停點的時間尚未觸發。

this.pausePoints = [ 
    {second: 5, func: function() { /* whatever */ }, 
    {second: 15, func: function() { /* whatever */ } 
    //etc. 
]; 

this.videlem.addEventListener('timeupdate',function(e){ 
    if (this.pausePoints.length && this.videlem.currentTime > this.pausePoints[0].seconds) { 
     var pausePoint = this.pausePoints.shift(); 
     pausePoint.func(); 
     this.videlem.pause(); 
    } 
}.bind(this), false);