HTML5 视频 - 播放事件未触发答案

【问题标题】：HTML5 video - Play event not firingHTML5 视频 - 播放事件未触发
【发布时间】：2012-04-29 00:20:26
【问题描述】：

我目前在 Safari 中遇到 HTML5 视频事件问题。我正在我的页面上播放一个视频。视频加载并正确播放。但是，播放事件并不总是触发。如果用户：

点击播放
观看视频到最后（结束事件触发）
再次点击播放

播放事件不会在第二次点击时触发。如果我当时暂停/播放电影，则会触发正确的事件。

如果视频已经播放完毕并且用户再次按下播放键，我如何让视频标签的播放事件触发？

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

【问题讨论】：

标签： javascript html video safari dom-events

【解决方案1】：

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

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

这在 Safari 6 中可能不再是问题，但在 IE 9 中仍会出现问题。请查看 longtailvideo.com 的 this chart 中的 End Events 列 - 他们概述了不一致之处好吧。

用几行代码很容易规范这个问题 - 像这样：

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

这会使视频在ended 上处于暂停状态，因此它会在重播时正确抛出play 事件。

你可以在 IE 9 中尝试这个工作示例，或者看看我在这个 jsfiddle 上的意思：http://jsfiddle.net/PWnUb/

【讨论】：

【解决方案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
});

希望这会有所帮助。

【讨论】：