HTML5 視頻 - 播放事件未觸發

Question

我目前在 Safari 中有一個 HTML5 視頻事件問題。 我正在我的頁面上播放單個視頻。 視頻加載並正確播放。 但是，播放事件並不總是會觸發。 如果用戶：

1. 點擊播放
2. 觀看視頻到最后（結束事件觸發）
3. 再次點擊播放

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

如果視頻已播放完畢並且用戶再次按下播放鍵，我該如何觸發視頻標簽的播放事件？

drawVidPlayer 使用視頻索引作為頁面渲染的一部分被調用

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);     
}    

Answer 1

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

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

這在 Safari 6 中可能不再是問題，但在 IE 9 中仍然會出現問題。請查看 longtailvideo.com 的此圖表中的“結束事件”列 - 它們很好地概述了不一致之處。

用幾行代碼很容易標准化這個問題 - 像這樣：

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

這會使視頻在ended處於暫停狀態，因此它會在重播時正確拋出play事件。

您可以在 IE 9 中嘗試這個工作示例，或者看看我在這個 jsfiddle 上的意思： http : //jsfiddle.net/PWnUb/

Answer 2

我有同樣的問題，我用一些 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
});

希望這可以幫助。