Chrome HTML5视频缓冲结束事件

Question

我正在尝试检测视频文件何时加载完成。在Firefox和Safari上已经成功实现，但在Chrome上，缓冲事件的行为很奇怪...

所以，在我的本地主机上，Chrome运行良好，但当我上传到服务器时：

1. 缓冲百分比停止在50％左右，但缓冲100％，

2. 当页面刷新时，百分比停留在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();
            });

有什么想法吗？ 谢谢

- Bahadır

Answer 1

尝试使用这个替代方案：

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的代码，因为它不太相关。

在所有当前浏览器中都可以正常工作。

附注：感谢John Dyer提供的mejs - 真棒！

- Jörn Berkefeld

---

你的评论中提到在IE 7/8中测试过，但我想测试肯定失败了，因为这些浏览器不使用addEventListener。 - AlienWebguy

@AlienWebguy：对不起，这是真的！我忘记了为myVideoTag.attachEvent('progress',function(e){...});添加额外的程序。 - Jörn Berkefeld