1

我正在尝试在使用 jQuery 淡入播放器之前比较视频是否已完全下载。为此，我使用了一个使用 setInterval() 函数的循环并比较视频属性“buffered.end(0)”和“持续时间”，但是两者的长度不同 - 因为第一个包含更多小数位（通过3）比第二个：

25.946847656 > 25.946847

在显示播放器之前，有什么方法可以检查视频是否已完全下载？

这是我目前所拥有的：

var playerObject = {
    init : function(obj) {
        "use strict";
        if (obj.length > 0) {
            if (obj.length > 1) {
                jQuery.each(obj, function() {
                    playerObject.start($(this));    
                });
            } else {
                playerObject.start(obj);
            }
        }       
    },
    start : function(obj) {
        "use strict";
        var thisTime = window.setInterval(function() {
            if (obj[0].buffered.end(0) === obj[0].duration) {
                window.clearInterval(thisTime);
                obj.fadeIn(200);   
                playerObject.create(obj);               
            }
        }, 1000);
    },
    create : function(obj) {
        "use strict";   
        obj.live('click', function() {
            var thisVideo = $(this)[0];
            if (thisVideo.paused === false) {
                thisVideo.pause();
            } else {
                thisVideo.play();               
            }           
        }); 
        playerObject.endVideo(obj); 
    },
    endVideo : function(obj) {
        "use strict";
        var thisTime = window.setInterval(function() {
            if (obj[0].ended == true) {
                  window.clearInterval(thisTime);
                  obj.fadeOut(200);
            }
        }, 1000);
    }
};
$(function() {
    "use strict";
    playerObject.init($('.player'));
});
4

2 回答 2

2

HTML 5 规范中似乎没有任何内容会在下载/缓冲完成后触发，但是一旦浏览器确定已下载足够的媒体以便可以播放到最后，就会触发一个canplaythrough事件无需停止和缓冲更多媒体。

于 2012-07-03T16:05:45.883 回答
0

我现在修改了start()方法，简单地将两者相除，将结果四舍五入并与 1 进行比较，这表明它们都是相同的：

start : function(obj) {
    "use strict";
    var thisTime = window.setInterval(function() {
          if (Math.round(obj[0].buffered.end(0) / obj[0].duration) === 1) {
                window.clearInterval(thisTime);
                obj.fadeIn(200);   
                playerObject.create(obj);               
          }
     }, 1000);
}
于 2012-07-03T14:39:22.663 回答