HTML5视频-播放事件未触发。

Question

我在Safari浏览器中遇到了一个HTML5视频事件的问题。我的页面上只播放一个视频，视频能够正确地加载和播放。然而，有时候播放事件不会触发。如果用户：

1. 点击播放
2. 看完整个视频（ended事件触发）
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);     
}    

- user1026361

Answer 1

我曾遇到相同的问题，我使用了一点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
});

希望这能有所帮助。

- TheCamps10

Answer 2

HTML5现在规定浏览器在媒体文件播放到结尾时必须触发timeupdate、paused和ended事件，但是该规范并不总是那么清晰。因此，这种行为在不同的浏览器中表现不一致。有些浏览器在文件结束时不设置paused=true或不触发paused事件。

在你提到的Safari问题中，当视频第二次开始播放时，paused仍然等于false，因此浏览器没有理由再次触发play事件。

这个问题在Safari 6中可能已经不存在了，但是在IE 9中仍然存在。可以参考longtailvideo.com上这个表格中的End Events列，它们很好地概述了这些不一致性。

通过几行代码很容易解决这个问题 - 就像这样：

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

这将在视频结束时将其置于暂停状态，因此它将在重新播放时正确地抛出“play”事件。

您可以在IE 9中尝试此工作示例，或在此jsfiddle上查看我所说的内容：http://jsfiddle.net/PWnUb/

- TimHayes