HTML5 视频 - 播放事件未触发
HTML5 video - Play event not firing
我目前在 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 中查看此图表中的"结束事件"列 - 它们很好地概述了不一致之处。
用几行代码很容易规范化这个问题 - 像这样:
$("video").on("ended", function () {
if (!this.paused) this.pause();
});
这会将视频置于暂停状态 ended
,因此它将在重播时正确抛出play
事件。
您可以在IE 9中尝试此工作示例,或者了解我在此jsfiddle上的意思:http://jsfiddle.net/PWnUb/
我有同样的问题,我用一些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
});
希望这有帮助。
相关文章:
- ReactJS:如何使用react正确播放带有onClick事件的html5视频
- YouTube播放器API全屏事件
- 如何将查找事件发送到嵌入了 SWFObject 2.2 的播放器
- 如何在网站上的嵌入式黑莓媒体播放器上跟踪播放和暂停事件
- 将Backbone事件与HTML5视频播放事件结合使用
- 在点击和加载事件时播放暂停背景音频
- 在html5视频播放事件上捕获视频源
- HTML5+Javascript音频在音频播放的特定时间触发事件
- 在单击时暂停并播放 JavaScript 滑块事件
- 播放,Soundcloud oembed 小部件的暂停事件
- 在 Javascript 事件上播放声音
- 视频播放事件中的 Angular 2 路绑定不起作用
- 非动态插入 YouTube 播放器 iframe 不会触发事件
- Internet Explorer 10:<音频>“播放”事件处理程序仅发生一次
- 如何使用 jQuery 对 HTML5 视频播放器进行动画处理以响应触发事件
- JavaScript + HTML5 音频播放器 - 停止缓冲,事件处理程序问题
- 在 html5 视频标签中播放事件
- 是否可以使jQuery单击事件触发播放声音重叠的函数
- 如果鼠标移动到图像上,我如何添加鼠标事件,它将显示播放/停止/暂停按钮
- 如何存储和重用点击事件(播放音频/视频的权限)