javascript上的自定义提示点
我在vzaar的视频上做一个提示点实现 如果播放视频,在第二个3和9,视频上方会出现一个javascript上的自定义提示点,javascript,html,Javascript,Html,我在vzaar的视频上做一个提示点实现 如果播放视频,在第二个3和9,视频上方会出现一个div,询问一些问题,如果您回答得很好,视频将一直播放到结束。如果您再次播放视频,将再次询问答案,依此类推 我的代码基本上是: 获取一个对象键值(从现在起我称之为cuepointsobject),其中键是第二个,值是 将显示在视频上的div的id $(document).ready(function(){ var myPlayer = document.getElementById('video
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);
});
});
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"
}
如有疑问,请告诉我。提前谢谢你 媒体结束时,您已通过查找该事件的播放状态来重置问题。当用户在不同的地点启动视频时,您可以通过查找
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小时才能给你赏金,你明天就能拿到