ブラウザの互換性を維持しながら HTML5 でビデオ ソースを動的に変更する方法

HTML5 でビデオ ソースを動的に変更する

ユニバーサル ビデオ プレーヤーを作成するためには、動的にビデオ ソースを変更する際にブラウザーの互換性を考慮することが重要です。ビデオソースを変更します。

問題

複数の の使用

解決策

この問題を解決するには、

実装例

次の JavaScript コードは、動的に変更するプロセスを示しています。 src 属性と canPlayType() 関数を使用したビデオ ソース:

var video = document.getElementById('video');
var source = document.createElement('source');
var supported = video.canPlayType('video/mp4');
if (supported == '' || supported == 'no') {
  supported = video.canPlayType('video/webm');
}
if (supported != '' && supported != 'no') {
  source.setAttribute('src', 'path/to/video.' + supported.replace('video/', ''));
  source.setAttribute('type', supported);
  video.appendChild(source);
  video.load();
  video.play();
} else {
  alert('Video file not supported.');
}

このアプローチソース変更プロセスを簡素化し、ブラウザ間の互換性を確保し、一貫したビデオ再生エクスペリエンスを提供します。

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