Javascript HTML5视频播放事件未触发

我目前在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);     
}    

功能drawVidPlayer（vindex）{
var turl=vidList[vindex]['thumbUrl']；
var vurl=vidList[vindex]['url']；
var valias=vidList[vindex]['type']；
视频播放器（）；
$（'mediapot'）.css（'backgroundColor'，'000000'）；
$（'#mediapot'）.show（）；
$（“#mediapot”）.html（'您的浏览器不支持视频标记'）.appendTo（“#wrap_media_vod”）；
var velem=document.getElementsByTagName（'video'）[0]；
velem.addEventListener（'play'，initVidTimer，false）；
velem.addEventListener（'pause'，killVidTimer，false）；
velem.addEventListener（'end'，killVidTimer，false）；
}    
函数名为vidplayer（）{
var velem=document.getElementsByTagName（'video'）[0]；
if（velem！=未定义）{
velem.removeEventListener（'play'，initVidTimer）；
velem.removeEventListener（'pause'，killVidTimer）；
velem.removeEventListener（'end'，killVidTimer）；
}
$（'#mediapot'）.empty（）；
$（'#mediapot'）.html（''）；
}
函数initVidTimer（）{
如果（activityTimer==null）{
外部活动（19）；
activityTimer=setInterval（函数（）{
external.WriteLog（“活动计时器正在运行”）；
外部活动（19）；
}, 5000);
}
}
函数killVidTimer（）{
clearInterval（活动计时器）；
activityTimer=null；//终止保留计时器
var velem=document.getElementsByTagName（'video'）[0]；
外部写日志（velem.end）；
}    

现在指定，当播放位置到达媒体文件末尾时，浏览器必须抛出

时间更新

、

暂停

、和

结束

事件，但规范并不总是那么清楚。因此，浏览器之间的这种行为是不一致的。有些人在文件结束时不设置

paused=true

或触发

paused

事件

在您的Safari版本中，当视频第二次开始播放时，

paused

仍然等于

false

，因此浏览器没有理由再次触发

play

事件

这在Safari 6中可能不再是一个问题，但在IE 9中仍然存在。看看longtailvideo.com上的“结束事件”专栏——它们很好地概括了不一致之处

用几行代码就可以很容易地规范化这个问题-如下所示：

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

这将使视频在

end

上处于暂停状态，因此它将在回放时正确抛出

play

事件

---

您可以在IE 9中尝试这个工作示例，或者看看我在这个JSFIDLE上的意思：

我也有同样的问题，我用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
});

希望这有帮助