如何動態更改 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 類型。然後，新來源將附加到影片元素，並重新載入影片。這種方法在 Chrome 和 Firefox 中都有效。

以上是如何動態更改 HTML5 中的視訊來源而不出現瀏覽器相容性問題？的詳細內容。更多資訊請關注PHP中文網其他相關文章！