ブラウザの互換性の問題を発生させずに HTML5 でビデオ ソースを動的に変更する方法

HTML5 でのビデオ ソースの動的変更

問題の説明

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

解決策

この問題を解決するには、canPlayType() 関数を使用する次のアプローチを検討してください。

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

function changeSource(newUrl) {
  // Remove existing `<source>` tags
  while (video.children.length > 0) {
    video.removeChild(video.children[0]);
  }

  // Create a new `<source>` tag with the new URL
  const source = document.createElement('source');
  source.src = newUrl;

  // Determine the appropriate MIME type using `canPlayType()`
  const mimeType = video.canPlayType('video/mp4') ? 'video/mp4' : 'video/webm';
  source.type = mimeType;

  // Append the new `<source>` tag to the video element
  video.appendChild(source);

  // Reload the video
  video.load();
  video.play();
}

説明

この解決策既存の を削除する必要があります。タグを使用し、目的の URL で新しいタグを作成し、canPlayType() を使用して適切な MIME タイプを決定します。新しいソースが video 要素に追加され、ビデオがリロードされます。このアプローチは Chrome と Firefox の両方で効果的に機能します。

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