jquery - 当视频自定义控件搜索栏试图结束时，HTML5 视频结束事件未触发

Question

我开发了一个带有自定义控件(前进、后退、停止播放和暂停)的自定义 HTML5 视频播放器。我调用了视频 ended 函数，并在视频播放完毕后显示另一个 html 页面，并且它在所有浏览器中都能正常工作。

但是当我尝试使用自定义搜索栏搜索视频到视频结尾时，视频结束功能在 IE9、IE10 和 IE11 中未触发，但在 中工作正常strong>Chrome 和 firefox。

我在谷歌上搜索了很多次，但没有结果。请为此提供任何解决方案。

下面是我用于搜索栏功能的代码，

   /* *********** 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&amp;startimage=" + (strStartImage != "" ? strStartImage : "Images/Player/DefaultStartImage.gif") + "&amp;srturl=" + strSubTitles + &amp;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'>"+"&#187;"+"</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);

我们将不胜感激。

Answer 1

在每次更新时检查你的当前时间，然后检查当前时间和持续时间，如果两者相等则执行你的操作。

window.setInterval(function(t){
    if(videoObject.currentTime == videoObject.duration)
    {
         //your code  
    }
    clearInterval(t);
 });