次のように、テスト ページに 2 つのビデオ要素があります。
<div id="parent">
<video id="foo" autoplay>
<source src="http://www.quirksmode.org/html5/videos/big_buck_bunny.mp4" type="video/mp4" />
<source src="http://www.quirksmode.org/html5/videos/big_buck_bunny.webm" type="video/webm" />
<source src="http://www.quirksmode.org/html5/videos/big_buck_bunny.ogv" type="video/ogg" />
</video>
<video id="bar" autoplay>
<source src="http://www.quirksmode.org/html5/videos/big_buck_bunny.mp4" type="video/mp4" />
<source src="http://www.quirksmode.org/html5/videos/big_buck_bunny.webm" type="video/webm" />
<source src="http://www.quirksmode.org/html5/videos/big_buck_bunny.ogv" type="video/ogg" />
</video>
</div>
最新の FF では、すべて正常に動作します。ただし、Chrome では、これらの動画はどちらも再生されません。ネットタブを見ると、数秒から無限に「保留中」ステータスのままになっていることがわかります。ビデオ要素をコメントアウト/削除すると、他の要素が再生されます。
同様の問題について話している Chromium のバグ レポートを複数見たことがありますが、親コンテナーに直接関連していると思われるものはありません。JS を介してマークアップを動的に構築しようとしましたが、同じ結果が得られました。また、コーデック属性を追加しようとしましたが、うまくいきませんでした。
議論のために、ページを再構築して、同じ親にビデオが存在しないようにすることは選択肢ではないとしましょう。これは単なる修正不可能なバグですか?ハックですが、可能な回避策はありますか?