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

何かが、ジャバスクリプトのプロセスを遅らせることができます。

しかし、あなたの質問に基づく：

だから私は を作ることによって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秒でビデオを開始すると、ビデオを2回ポーズし、100と1000の両方のタイマーに当たってしまいます。削除セクションにループを追加したい場合は、ループをスキップして1回だけ再生します。

Answer 2

timeupdateは毎秒1回発生しません：

イベント頻度は、システムの負荷に依存するが、イベントハンドラがに250msのより長いを取ることはありませんと仮定すると（約4Hzのと66Hzの間でスローされます走る）。利用者エージェントは、システム負荷とその都度イベントを処理する平均コストに基づいてイベントの頻度を変えることが推奨されているため、ユーザーエージェントがビデオのデコード中に快適に処理できるよりも頻繁に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);