我使用自定义控件(前进,后退,停止播放和暂停)开发了自定义 HTML5视频播放器。我调用视频结束功能,并在视频完成后显示另一个html页面,并且在所有浏览器中都能正常工作。
但是,当我尝试使用自定义搜索栏搜索视频结束视频时,视频已结束功能未在 IE9,IE10和IE11 中触发,并且在< strong> Chrome和Firefox。
我用Google搜索了很多次,但没有结果。 PLZ为此提供任何解决方案。
以下是我用于搜索栏功能的代码,
/* *********** HTML code *************************/
<td id="tdSeekbar" style="cursor:pointer;">
<input id="seek-bar" type="range" title="Seekbar" value="0">
</td>
<video autoplay id='objVideoPlayer' class='clsObjVideoPlayer' width='1024' height='576'>
<source src='" + strVideo.substring(1) + ".mp4' type='video/mp4'><object id='objVideoPlayer' type='application/x-shockwave-flash' class='clsObjVideoPlayer'>
<param name='movie' value='Resources/VideoPlayer.swf' />
<param name='allowFullScreen' value='true' />
<param name='FlashVars' value='flv=" + strVideo + ".flv&startimage=" + (strStartImage != "" ? strStartImage : "Images/Player/DefaultStartImage.gif") + "&srturl=" + strSubTitles + &configxml=Resources/VideoPlayer_Config.xml' />
</object>
</video>
/**********Javascript code ***********************************/
var seekBar = document.getElementById("seek-bar");
video = document.getElementById("objVideoPlayer");
// Event listener for the seek bar
seekBar.addEventListener("change", function() {
try {
// Calculate the new time
var time = video.duration * (seekBar.value / 100);
// Update the video time
video.currentTime = time;
}catch (Ex) { }
});
// Update the seek bar as the video plays
video.addEventListener("timeupdate", function() {
// Calculate the slider value
var value = (100 / video.duration) * video.currentTime;
// Update the slider value
seekBar.value = value;
});
// Pause the video when the seek handle is being dragged
seekBar.addEventListener("mousedown", function() {
video.pause();
});
// Play the video when the seek handle is dropped
seekBar.addEventListener("mouseup", function() {
video.play();
});
function videoEnd() {
try{
instrHeader = " (Click below links to go to certain topic)";
$("#instrTable").empty();
$("#divInstrHeader").css('display','');
$("#tdTitle").append("<span>"+instrHeader+"</span>");
var len = eval("jsonInstructions." + videoName.replace(/\-/g, "_") + ".length");
for(var i=0;i<len;i++)
$("#instrTable").append("<tr><td width='12px'>"+"»"+"</td><td style='text-align:left;padding-left:3px;'><a class='topics-section' href='javascript:void(0)' onclick='" + "playVideo(" + eval("jsonInstructions." + videoName.replace(/\-/g, "_") + "[" + i + "].Time") + ")" + "'>"+ eval("jsonInstructions." + videoName.replace(/\-/g, "_") + "[" + i + "].Title") + "</a></td></tr>");
$("#divVPToolbar").css("display", "none");
$('#tdVideoPlayer').hide();
$('#topic-links').show();
$("#imgFButtons").css("display", "").attr("src", "Images/UIFrame/BackMO.png").attr("onmouseover", "this.src='Images/UIFrame/BackME.png';").attr("onmouseout", "this.src='Images/UIFrame/BackMO.png';").attr("onclick", "JavaScript:LoadMovie('Flash','','','/TMContents.swf','');
$('#topic-links').css('display','none');
$('#tdVideoPlayer').css('display','');
$('#divInstrHeader').css('display','none');");
}catch (Ex) {
}
}
video.addEventListener('ended',videoEnd,false);
任何帮助将不胜感激。
答案 0 :(得分:0)
检查每次更新中的当前时间,然后检查当前时间是否相等,然后执行操作。
window.setInterval(function(t){
if(videoObject.currentTime == videoObject.duration)
{
//your code
}
clearInterval(t);
});
&#13;