HTML5视频结束事件不触发

我开发了一个定制HTML5视频播放器与自定义控件（前进，后退，停止播放和暂停）。我调用视频结束了函数，并在视频完成时显示另一个html页面，并且它在所有浏览器中都能正常工作。HTML5视频结束事件不触发

但是当我尝试寻求使用自定义搜索条结束视频的视频，视频结束功能IE9，IE10和IE11不点火，并在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&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);

任何帮助将不胜感激。

来源

2015-03-02 Venkatesh Machineni

请分享一些代码。如果您不向我们提供任何“不起作用”的东西，我们无法帮助您。 – thomasb 2015-03-02 12:44:39

我使用HTML5默认播放器而不是IE中的自定义播放器控件来检查相同的seekbar'ended'事件，并且可能是IE浏览器本身和其他浏览器中的问题。 – 2015-03-05 09:08:14

如果有人遇到同样的问题，请在这里发帖。 – 2015-03-10 06:55:18

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

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

来源

2016-01-13 11:12:55

HTML5视频结束事件不触发

回答

相关问题