1

jQueryを使用してプレーヤーをフェードインする前に、ビデオが完全にダウンロードされているかどうかを比較しようとしています。これを行うには、setInterval（）関数を使用してループを使用し、ビデオ属性'buffered.end（0）'と'duration'を比較していますが、最初の属性には小数点以下の桁数が多いため、両方の長さが異なります（ 3）2番目のものより：

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

ダウンロード/バッファリングが完了するとトリガーされるHTML5仕様には何も表示されませんが、最後まで再生できるように十分なメディアがダウンロードされたとブラウザが判断すると発生する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 に答える