ブラウザの互換性を維持しながら HTML5 ビデオ ソースを動的に切り替える方法

HTML5 ビデオの動的ソース切り替え

HTML5 video 要素を利用すると、さまざまなプラットフォームでビデオを再生するための多用途のソリューションが提供されます。ただし、プレイリストまたはメニューを統合するには、ビデオ ソースを動的に変更する必要があります。 を単純に更新しながら、タグは単純そうに見えるかもしれませんが、ブラウザの互換性には課題が生じます。

具体的には、Firefox では、複数の を更新します。タグがload()メソッドを使用すると、ビデオプレーヤーが突然終了します。したがって、より信頼性の高いアプローチは、

バニラ JavaScript ソリューション

ビデオ ソースを動的に切り替えるには、次のバニラ JavaScript スニペットを考慮してください:

var video = document.getElementById('video');
var source = document.createElement('source');

source.setAttribute('src', 'video-url.mp4');
source.setAttribute('type', 'video/mp4');

video.appendChild(source);
video.play();

setTimeout(() => {
  video.pause();

  source.setAttribute('src', 'video-url.webm');
  source.setAttribute('type', 'video/webm');

  video.load();
  video.play();
}, 3000);

互換性に関する考慮事項

提供されたソリューションは Chrome では適切に機能しますが、他のブラウザー間の互換性を確認する必要があります。さらに、一貫したユーザー エクスペリエンスを確保するために、ブラウザー固有の処理を組み込むことを検討してください。

以上がブラウザの互換性を維持しながら HTML5 ビデオ ソースを動的に切り替える方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。