HTML5視頻 - 播放活動未觸發

我目前在Safari中有一個HTML5視頻事件問題。我在我的頁面上播放單個視頻。視頻加載並正確播放。然而，比賽事件並不總是發生。如果用戶：HTML5視頻 - 播放活動未觸發

點擊播放
收看錄像到結束（截至事件觸發）
點擊播放再次

該劇不會觸發事件在第二次點擊。如果我當時暫停/播放電影，則正確的事件會觸發。

如果視頻已完成並且用戶再次按下播放，如何使視頻標籤的播放事件觸發？

**drawVidPlayer is called with the videos index as part of the page render 

function drawVidPlayer(vindex){ 
    var turl=vidList[vindex]['thumbUrl']; 
    var vurl=vidList[vindex]['url']; 
    var valias=vidList[vindex]['type']; 
    destroyVidPlayer(); 
    $('#mediaspot').css('backgroundColor', '#000000'); 
    $('#mediaspot').show(); 
    $('#mediaspot').html('<video controls="controls" id="twnvideo" poster="'+turl+'" style="height:225px; width:460px;"><source src="'+vurl+'" type="video/ogg" /><source src="'+vurl+'" type="video/mp4" /><source src="'+vurl+'" type="video/webm" />Your browser does not support the video tag.</video>').appendTo('#wrap_media_vod'); 
    var velem=document.getElementsByTagName('video')[0];  
    velem.addEventListener('play', initVidTimer, false); 
    velem.addEventListener('pause', killVidTimer, false); 
    velem.addEventListener('ended', killVidTimer, false); 
}  
function destroyVidPlayer(){ 
    var velem=document.getElementsByTagName('video')[0]; 
    if(velem!=undefined){ 
     velem.removeEventListener('play', initVidTimer); 
     velem.removeEventListener('pause', killVidTimer); 
     velem.removeEventListener('ended', killVidTimer); 
    } 
    $('#mediaspot').empty(); 
    $('#mediaspot').html(''); 
} 
function initVidTimer(){ 
    if(activityTimer==null){ 
     external.OnUserActivity(19); 
     activityTimer=setInterval(function(){ 
      external.WriteLog('activity timer running'); 
      external.OnUserActivity(19); 
     }, 5000); 
    } 
} 
function killVidTimer(){ 
    clearInterval(activityTimer);  
    activityTimer=null; // Kill keepAlive timer 
    var velem=document.getElementsByTagName('video')[0]; 
    external.WriteLog(velem.ended);  
}

來源

2012-04-17 user1026361

HTML5現在指定瀏覽器必須拋出timeupdate，paused，並且ended事件時，回放位置到達媒體文件的結尾，但規範並不總是清楚了。因此，這種行爲在瀏覽器之間不一致。有些文件結束時不會設置paused=true或觸發paused事件。

在您的Safari問題中，當視頻第二次開始播放時，paused仍然等於false - 因此瀏覽器沒有理由再次觸發play事件。

這可能不再是在Safari 6的一個問題，但它仍然在IE中打破9. longtailvideo.com看看在結束事件在this chart柱 - 他們勾勒出的不一致好。

這將很容易正常化這一問題的幾行代碼 - 這樣的：

$("video").on("ended", function() { 
    if (!this.paused) this.pause(); 
});

這使視頻暫停狀態上ended，所以它會正確地拋出play事件重播。

你可以試試這個工作樣本中IE 9或明白我的意思在此的jsfiddle：http://jsfiddle.net/PWnUb/

來源

2012-10-13 18:57:18 TimHayes

我有同樣的問題，我解決了一個位的jQuery：

function videoend(){ 
    var duration = $("video").get(0).duration; 
    var current = $("video").get(0).currentTime; 

    if(current==duration){ 
     //Whatever you wanna do when video ends 
    }; 
} 

$(document).ready(function(){ 
    setInterval("videoend()", 200); //or any other time you wanna use 
});

希望這有助於。

來源

2013-08-31 06:43:58 TheCamps10

HTML5視頻 - 播放活動未觸發

回答

相關問題