Question

我在vzaar的视频中制作提示点。

如果你播放视频，在第二个3和9上，div会出现在视频上方询问某些内容，如果你回答得很好，视频会一直持续到完成。如果您再次播放视频，将再次询问答案，依此类推。

基本上我的代码是：

获取一个对象键值（我将从现在开始将其称为cuepointsobject），其中键是第二个值和值将出现在视频上的div的ID。

$(document).ready(function(){
     var myPlayer = document.getElementById('video_movie');
     var video2 = $(myPlayer);
     window.tiempos_questions_originales = video2.data('times');
     window.tiempos_falsos = $.extend({}, tiempos_questions_originales);
     myPlayer = new vzPlayer('video_movie');
     myPlayer.ready(function(){
         checar_tiempos(myPlayer,cb,tiempos_falsos);
     });        
});

然后询问视频到vzaar的api的当前时间，代码将第二个解析成一个整数，如果第二个解析的是div出现的对象。

function checar_tiempos(player,cb,tiempos){
   var tiempo;
   player.getTime(function(time){
      tiempo = time; //Current Time of the video playing
      var new_tiempos = cb(parseInt(tiempo),tiempos,player); //Gets the "new times" if a question has been answered the "new times" is the cuepointsobject without the answered question so that question won't be asked again until the video finishes (when the cuepointsobject is set as the beginning)
     setTimeout(function(){ checar_tiempos(player,cb,new_tiempos) }, 300); //Every 3 miliseconds this function will be executed again.
   });
}

function cb(time,tiempos,player){
     var _video = player;
    player.addEventListener('playState', function(i){
         player.ended = i; //Sets the state of the video (buffering, mediaPlaying,mediaEnded)
    });
    if(player.ended == "mediaEnded"){
       tiempos = $.extend({}, tiempos_questions_originales); //If the video has finished the cuepointsobject is set again as the beginning of the video.
    }
    if(String(time) in tiempos){ //The current time is inside cuepointsobject
        var question = tiempos[String(time)];
        delete tiempos[String(time)]; //Delete the question from the cuepointsobject so it won't be asked again during the video, until finishing.
       if($(question).is(":visible") == false){
          _video.pause(); //Pause the video
          $(question).show(); //The question appears
       }
    }
    return tiempos; //Returns the "new times"
}

到目前为止一切都很好，我遇到的问题是：

当您观看视频时，请试试假设你在第二个问题上问了问题，然后在第二个10问你想再回来，再次问第二个问题，但如果你把视频放在第二个3（视频还没有完成），div 不会出现，所以我的问题是：你怎么做到这一点问题再次出现？

有任何疑问请告诉我。提前谢谢!!

Answer 1

通过查找该事件playState，您已经在媒体结束时重置了问题。当用户通过查找seekbar交互在不同位置启动视频时，您可以执行相同的操作。进行以下代码修改，我只是在后面的addEventListener语句中添加了一个if和另外一个案例：

player.addEventListener('playState', function(i){
     player.ended = i; //Sets the state of the video (buffering, mediaPlaying,mediaEnded)
});
player.addEventListener('interaction', function(type) {
     player.interaction = type; //Sets the type of user interaction (seekbar, etc)
});
if(player.ended == "mediaEnded" || player.interaction == "seekbar"){

javascript上的自定义提示点

1 个答案: