web-dev-qa-db-ja.com

HTML5動画要素リクエストは永遠に保留中です（Chromeで）

Chromeに奇妙な問題があります。

<video>要素を読み込むたびに、chromeは2つのHTTP要求を開始します。

最初のものは永久に保留状態になります（これは「メタデータ」、「部分的なコンテンツ」リクエストだと思います。しかし、ポイントは保留状態にあることです）

同じファイルの2番目のファイルは問題なく、ロードが終了した後、閉じます。

ここでの問題は、ブラウザーページを閉じるまで、最初の要求が保留のままになることです。ある時点で、複数のビデオをロードすると、Chromeはすべての利用可能なリクエストがこれらの保留中のリクエストによって占有されているため、ダウンロードを中断して停止します。

ここに縮小テストケースを作成しました： http://jsbin.com/ixifiq/

この問題を再現するために確認しましたが、 Video.js と MediaElements.js の両方のフロントページで発生しています。ページの読み込み時にネットワークタブを開くと、最初の保留中のリクエストが表示されます。次に、ビデオの再生ボタンを押すと、2番目のリクエストが機能するのがわかりますが、最初のリクエストは永久に保留されます。

誰もこのバグの修正を知っていますか？

html5google-chromehtml5-videomediaelement.jsvideo.js
41
Simon Boudrias

どうやらそれはChromeのバグです。そして、ATMには何の関係もありません。

しばらく前にChromiumプロジェクトで問題を報告しましたが、割り当てられました。近い将来修正されることを期待しています。

バグレポート： https://code.google.com/p/chromium/issues/detail?id=234779

14
Simon Boudrias

（このバグはChrome 38.0.2125.111、OS X 10.10にまだ存在しています）

これはChromeバグであり、ダミー?time-suffixトリック、ちょうどhelping Chromeソケットをより速く解放する：

RevealJs HTMLプレゼンテーションにも同じバグがあり、20以上のビデオ（スライドごとに1つ、スライドフォーカスで自動再生）がありました。副作用として、この未リリースのソケットの問題は、同じHTML DOMで最初の保留/ブロックされたビデオの直後にある他のajax-lazy-loadedメディアにも影響しました。

Walterの回答（ バグレポート を参照）に続いて、次の手順に従って問題を修正しました。

1-ビデオpreload属性をnoneに設定：

<video preload="none">
    <source src="video.webM" type="video/webM">
</video>

2-canplaythroughイベントハンドラを使用して、ビデオが読み込まれて準備ができたら再生または一時停止します。これはChromeその動画の読み込みに使用されたソケットを解放するのに役立ちます：

function loadVideos(){
    $("video").each(function(index){
            $(this).get(0).load();
            $(this).get(0).addEventListener("canplaythrough", function(){
                this.play();
                this.pause();
            });
    });
}
21
Ronan

すぐに機能するかどうかはわかりませんが、「video.mp4？t = 2123」のように、ビデオURLにパラメーターを追加してこの問題を解決したことを覚えています。もちろん、ビデオをロードするたびに、パラメーターは異なるはずです。私は使うだろう

var parameter = new Date().getMilliseconds();

取得して追加します。

これにより、少なくとも数か月前に、Chrome応答を永遠に待つことなく、同じビデオを複数回再生することができました。

それが役に立てば幸い。

9
Unapedra

このバグはまだ存在しています。単一ページのアプリケーションでHTML5ビデオプレーヤーを使用しています。プリバッファリングで約7人のプレーヤーをロードした後、制限に達し、ビデオがロードされなくなりました。画像に関連する別の答えを見つけましたが、この答えがこの問題を解決することを知って驚きました。

if(window.stop !== undefined) {
    window.stop();
} else if(document.execCommand !== undefined) {
    document.execCommand("Stop", false);
}

参照： Javascript：イメージリクエストのキャンセル/停止

8
Ecropolis

カルーセルなどの動的コンテンツ内でhtml5ビデオを使用して、ビデオソースをアンロードする必要があるブロックされたソケットを解放するときに、この問題が見つかりました。

var video = $('#video');
video[0].pause();
video.prop('src','');
video.find('source').remove();
video.remove();

バグは修正されたと主張していますが、私はまだChrome 42でこれをしなければなりませんでした。少なくともpreload = "auto"を設定できました。

6
sidonaldson

同じ症状がありましたが、問題は同じビデオでload()を2回連続して呼び出していたことです：同じビデオコントロール、同じビデオソース（MP4）。 2つの同一の206リクエストが開発ツールに表示された後、ビデオを数回切り替えた後、Chromeは最初のリクエストをキャンセルし、プログレッシブ再生をオフにして、2番目のリクエストが完了するのを待ちます。

また、MP4ソースを使用していて、プログレッシブ再生用にフォーマットされていない場合（MOOV atomがファイルの先頭にあることを意味します）、1-2ファイルに対する追加の要求。これにより、さらに混乱します。

1
Seth