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

在＆＃34; timeupdate＆＃34;上执行操作在一定时间间隔后

2 个答案: