javascript上的自定义提示点

javascript上的自定义提示点,javascript,html,Javascript,Html,我在vzaar的视频上做一个提示点实现 如果播放视频,在第二个3和9,视频上方会出现一个div,询问一些问题,如果您回答得很好,视频将一直播放到结束。如果您再次播放视频,将再次询问答案,依此类推 我的代码基本上是: 获取一个对象键值(从现在起我称之为cuepointsobject),其中键是第二个,值是 将显示在视频上的div的id $(document).ready(function(){ var myPlayer = document.getElementById('video

我在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"
    }
    
  • 到目前为止一切顺利,我的问题是:

    当你在看录像的时候,让我们 假设你在第二个3问这个问题,然后在第二个10问你 想再问第二个3题,但如果你 把视频放在第二个3(视频还没有结束),div 不会出现,所以我的问题是:你怎么做才能让 问题又出现了


    如有疑问,请告诉我。提前谢谢你

    媒体结束时,您已通过查找该事件的播放状态来重置问题。当用户在不同的地点启动视频时,您可以通过查找
    seekbar
    交互来执行相同的操作。进行以下代码修改,我刚刚在下面的
    if
    语句中添加了一个额外的
    addEventListener
    和一个案例:

    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"){
    

    我要等24小时才能给你赏金,你明天就能拿到