我目前在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);
}
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/
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
});
希望这会有所帮助。