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視頻結束事件不觸發

回答

相關問題