Chrome html5视频缓存.事件结束
chrome html5 video buffered.end event
我正在尝试检测视频文件何时完成加载。我使它在firefox和safari上成功工作,但在chrome上,缓冲事件的行为很奇怪。所以,在我的本地主机chrome工作正常,但当我上传到服务器;
-
缓冲百分比停止在%50左右,但缓冲%100,
-
当页面刷新时,百分比保持在%0,但它继续缓冲。
这是我的javascript
function loaded()
{
var v = document.getElementById('myVideo');
var r = v.buffered;
var total = v.duration;
var current=v.currentTime;
var start = r.start(0);
var end = r.end(0);
var downloadPercent= Math.round((end / total)*100)
$("#loadProgress").css('width',downloadPercent+ '%');
if(downloadPercent==100){
$("#preloaderWrapper").fadeOut(function(){
document.getElementById('myVideo').play();
clearInterval(ratoteLoad);
$(this).remove();
});
}
}
$('#myVideo').bind('progress', function()
{
loaded();
});
任何想法?谢谢你
试试这个:
myVideoTag = document.getElementById('video');
myVideoTag.addEventListener('progress', function(e) {
var percent = null;
// FF4+, Chrome
if (myVideoTag && myVideoTag.buffered && myVideoTag.buffered.length > 0 && myVideoTag.buffered.end && myVideoTag.duration) {
percent = myVideoTag.buffered.end(0) / myVideoTag.duration;
}
// Some browsers (e.g., FF3.6 and Safari 5) cannot calculate target.bufferered.end()
// to be anything other than 0. If the byte count is available we use this instead.
// Browsers that support the else if do not seem to have the bufferedBytes value and
// should skip to there. Tested in Safari 5, Webkit head, FF3.6, Chrome 6, IE 7/8.
else if (myVideoTag && myVideoTag.bytesTotal != undefined && myVideoTag.bytesTotal > 0 && myVideoTag.bufferedBytes != undefined) {
percent = myVideoTag.bufferedBytes / myVideoTag.bytesTotal;
}
if (percent !== null) {
percent = 100 * Math.min(1, Math.max(0, percent));
// ... do something with var percent here (e.g. update the progress bar)
}
}, false);
…从mediaelement.js复制的注释,以及代码,但调整为更容易显示在这里。我省略了Firefox 3.0的代码,因为它不太相关。
PS: thanks to John Dyer for mejs - great stuff;)
相关文章:
- 处理第三方库发送的ajax请求的开始和结束事件
- 在源节点上调用 stop() 是否会触发已结束的事件
- 检测事件回调的开始和结束
- 从 ngDialog 模式修改完整日历事件信息(开始和结束)
- 当父事件结束时,子侦听器是否已销毁
- 在触摸结束事件期间,Find元素手指处于打开状态
- 在窗口大小调整事件开始时暂停 Greensock 动画,在调整大小事件结束时恢复动画
- 点击功能在事件结束前触发功能
- 将Google日历事件结束时间添加到脚本中
- 第一个事件结束后调用一个事件
- d3.js firefox鼠标事件结束
- Chrome html5视频缓存.事件结束
- Web音频事件“结束”;在播放源缓冲区的一部分时未被触发
- Javascript CORS上传总是以错误事件结束
- 当allDay为真时,fullcalendar返回事件结束null
- 检测车轮事件结束JavaScript没有jQuery
- Jquery事件保持堆叠,直到前一个事件结束才开始
- 把事件结束onsubmit在我的javascript
- 当触摸事件结束时,isscroll返回顶部
- 文本选择事件结束