web-dev-qa-db-ja.com

HTML5ビデオ-ロードされた割合？

HTML5ビデオが読み込んだ量のパーセンテージを取得するためにクエリする必要があるイベントまたはプロパティを誰もが知っていますか？この図を表す幅のCSSスタイル「ロード済み」バーを描画したい。 You Tubeや他の動画プレーヤーと同じように。

チューブのように、ビデオ全体がロードされていない場合でもビデオが再生され、ビデオのロード量とロードの残り量についてユーザーにフィードバックを提供します。

YouTubeの赤いバーのように：

enter image description here

javascriptcssvideohtml5-video
36
wilsonpage

progressイベントは、データがダウンロードされると 1秒間に最大3回発生します。 ブラウザは、bufferedプロパティ;これに関する詳細なガイドは、MDNの メディアバッファリング、シーク、および時間範囲 で入手できます。

シングルロードスタート

ユーザーがビデオをスキップしない場合、ファイルは1つのTimeRangeにロードされ、bufferedプロパティには1つの範囲があります。

------------------------------------------------------
|=============|                                      |
------------------------------------------------------
0             5                                      21
|             \_ this.buffered.end(0)
|
\_ this.buffered.start(0)

その範囲の大きさを知るには、次のように読んでください。

video.addEventListener('progress', function() {
    var loadedPercentage = this.buffered.end(0) / this.duration;
    ...
    // suggestion: don't use this, use what's below
});

複数のロード開始

ユーザーが読み込み中に再生ヘッドの位置を変更すると、新しいリクエストがトリガーされる場合があります。これにより、bufferedプロパティが断片化されます。

------------------------------------------------------
  |===========|                    |===========|     |
------------------------------------------------------
  1           5                    15          19    21
  |           |                    |            \_ this.buffered.end(1)
  |           |                     \_ this.buffered.start(1)
  |            \_ this.buffered.end(0)
   \_ this.buffered.start(0)

バッファの数がどのように変化するかに注目してください。

連続したloadedではなくなったため、「ロードされたパーセンテージ」はもはや意味をなしません。現在のTimeRangeが何であり、どれだけがロードされているかを知りたい。この例では、ロードバーの位置start（0ではないため）と終了位置を取得します。

video.addEventListener('progress', function() {
    var range = 0;
    var bf = this.buffered;
    var time = this.currentTime;

    while(!(bf.start(range) <= time && time <= bf.end(range))) {
        range += 1;
    }
    var loadStartPercentage = bf.start(range) / this.duration;
    var loadEndPercentage = bf.end(range) / this.duration;
    var loadPercentage = loadEndPercentage - loadStartPercentage;
    ...
});
85
Yann L.

他のオーナは私のために働かなかったので、私はこの問題を掘り始め、これが私が思いついたものです。ソリューションは、jqueryを使用してプログレスバーを作成します。

function loaded()
{
    var v = document.getElementById('videoID');
    var r = v.buffered;
    var total = v.duration;

    var start = r.start(0);
    var end = r.end(0);

    $("#progressB").progressbar({value: (end/total)*100});      
}   

$('#videoID').bind('progress', function() 
{
    loaded();
}
);

これが他の人にも役立つことを願っています

6
Koen

ロードされた文字列のパーセント修正。

function loaded() {
    var v = document.getElementById('videoID');
    var r = v.buffered;
    var total = v.duration;

    var start = r.start(0);
    var end = r.end(0);
    var newValue = (end/total)*100;
    var loader = newValue.toString().split(".");

    $('#loaded').html(loader[0]+' loaded...');

    $("#progress").progressbar({
        value: newValue     
    });    
}
3
Bruno Sousa