HTML5 ビデオタグのソースを動的に変更するにはどうすればよいですか?

HTML5 ビデオ タグのソースの変更: 包括的なソリューション

ユニバーサル ビデオ プレーヤーを作成するには、ソースを動的に変更する問題に対処する必要がありますビデオの。これにより、ユーザーはプレイリスト内のビデオを切り替えることができます。これまでのアプローチでは複数の を使用していましたが、タグには制限があるため、この記事では単一の を使用する信頼性の高い方法を紹介します。 attribute.

canPlayType() を使用したファイル タイプの識別:

ビデオに適切なファイル タイプを決定するには、canPlayType() 関数を利用できます。この関数は、特定のメディア タイプに対するブラウザのサポート レベルを示す文字列を返します。例:

var canPlayMP4 = video.canPlayType('video/mp4');
var canPlayWebM = video.canPlayType('video/webm');

canPlayType() の結果に基づいて、

バニラ JavaScript を使用した実装:

次に、バニラ JavaScript を使用してビデオのソースを変更する方法を示すコード スニペットを示します:

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

// Create a new source element
var source = document.createElement('source');

// Set the source attributes dynamically based on browser support
if (canPlayMP4) {
  source.setAttribute('src', 'video.mp4');
  source.setAttribute('type', 'video/mp4');
} else if (canPlayWebM) {
  source.setAttribute('src', 'video.webm');
  source.setAttribute('type', 'video/webm');
}

// Append the source to the video element
video.appendChild(source);

// Play the video
video.play();

このアプローチにより、複数の を使用するという欠点がなく、動的なソース切り替えが可能になります。タグ。また、ブラウザでサポートされている最も適切な形式でビデオが再生されることも保証されます。

以上がHTML5 ビデオタグのソースを動的に変更するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。