HTML5视频 - 播放活动未触发

我目前在Safari中有一个HTML5视频事件问题。我在我的页面上播放单个视频。视频加载并正确播放。然而，比赛事件并不总是发生。如果用户：HTML5视频 - 播放活动未触发

点击播放
收看录像到结束（截至事件触发）
点击播放再次

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

如果视频已完成并且用户再次按下播放，如何使视频标签的播放事件触发？

**drawVidPlayer is called with the videos index as part of the page render 

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

来源

2012-04-17 user1026361

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/

来源

2012-10-13 18:57:18 TimHayes

我有同样的问题，我解决了一个位的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 
});

希望这有助于。

来源

2013-08-31 06:43:58 TheCamps10

HTML5视频 - 播放活动未触发

回答

相关问题