一定の時間間隔の後に「timeupdate」のアクションを実行します

Question

私はhtml5ビデオを使用しており、ビデオが閉じられた場所からビデオを継続するためにユーザーが視聴した時間を保存しようとしています。

$(document).ready(function() 
{ 
    $("video#eclassvideo").on(
    "timeupdate", 
     function(e){ 
      performaction(this.currentTime, this.duration); 
    }); 


function performaction(currentTime, duration){ 
    setTimeout(function(){ 
     console.log(currentTime); 
     console.log(' ajax action goes here') 
    },5000) 
} 

しかし、これは初回のみ、それが再び提供し続けていることの後につかむ作品：私はすべての5秒のビデオは、私は5秒ごとに現在の時間を取得するためにこれをした閲覧されたデータベースを更新しようとしています。このため 時間は毎秒2〜3回です。イベントの発生中にsettimeout関数を使用しようとしましたが、結果は同じでした。 5秒ごとに1回だけビデオの現在の時間を取得する方法を教えてください。

ありがとうございます。

Answer 1

これは私の問題は

$(document).ready(function(){ 
var player;  
var video=''; 
     $('#eclassvideo').bind('play',function(){ 
       video=document.getElementById('#eclassvideo'); 
       var videotime=setInterval(function() { 
       if(typeof($('#eclassvideo')[0])=='undefined'){ 
         window.clearInterval(videotime); 
         return false; 
       } 
       var curtime = $('#eclassvideo')[0].currentTime; 
       var duration = $('#eclassvideo')[0].duration; 
       saveprogressvideo(curtime,duration); 
       }, 5000); 
       $('#eclassvideo').bind('ended',function(){ 
         window.clearInterval(videotime); 
       }); 
     }); 
}) 

function saveprogressvideo(currenttime,duration) 
{ 
    var timevideo=$('#eclassvideo').attr('timevideo'); 
    var data=$('.videocontent').data();  
    data.videolength=duration.toFixed(2); 
    if(timevideo<currenttime) 
    { 
     $.ajax({ 
      url:'student_progress/learn_course/savevideotime', 
      data:data, 
      type:'post', 
      dataType:'json', 
      success:function(msg){ 
       $('.vidmsg').html(msg); 
      } 
     }) 
    } 
} 

を.Thanks解決は、

Answer 2

あなたのコードは、すべての秒複数のタイムアウトを設定しますので、<video> timeupdateイベントは、ビデオの再生中に、毎日15から250ミリ秒を発射。あなたが何を言っているのか分かっていれば、コードを5秒ごとに実行するだけです。ビデオの開始と停止のたびに間隔を設定したり削除したりする方がよいでしょう。

$(function() { 
 
    
 
    var timeout 
 
    
 
    $("#eclassvideo").on("playing pause", function(e) { 
 

 
     // save reference 
 
     var v = this 
 

 
     // clear previous timeout, if any 
 
     clearTimeout(timeout) 
 

 
     // call immediately if paused or when started 
 
     performaction(v.currentTime, v.duration) 
 
     
 
     // set up interval to fire very 5 seconds 
 
     if (e.type === "playing") { 
 
     timeout = setInterval(function() { 
 
      performaction(v.currentTime, v.duration) 
 
     }, 5000) 
 
     } 
 
    }) 
 
    
 
    function performaction(currentTime, duration) { 
 
    console.log(currentTime) 
 
    console.log(' ajax action goes here') 
 
    } 
 
    
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<video src="http://download.blender.org/peach/bigbuckbunny_movies/BigBuckBunny_320x180.mp4" id="eclassvideo" controls/>

CURRENTTIMEと保存された時刻との差が±5秒に達するたびに、あなたはまた、単に、timeupdateイベントに戻し、最後に保存されたCURRENTTIMEへの参照を保存し、火災performaction()ことができます。