在一定时间间隔后对 "timeupdate" 执行操作

Question

我正在使用 html5 视频并尝试存储用户观看视频的时间，以便从关闭的地方继续播放视频。为此，我尝试每观看 5 秒视频更新一次数据库我这样做是为了每 5 秒获取一次当前时间：

$(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)
}

但这只适用于它第一次抓取之后它再次继续提供每秒 2-3 次的时间。我尝试在事件触发期间使用 settimeout 函数，但结果相同。请帮助我如何每 5 秒只获取一次视频的当前时间。

提前致谢。

Answer 1

视频播放时，<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/>

您也可以只恢复到 timeupdate 事件，保存对上次保存的 currentTime 的引用，并在 currentTime 和保存的时间之间的差异达到 +/- 5 秒时触发 performaction()。

Answer 2

这解决了我的问题。谢谢

 $(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);
            }
        })
    } 
}

在一定时间间隔后对 "timeupdate" 执行操作

perform an action on "timeupdate" after certain time interval

jquery

html5-video