更改 HTML5 視訊標籤的來源：綜合解決方案

創建通用視訊播放器需要解決動態變更來源的問題視訊的。這允許用戶在播放清單中的影片之間切換。雖然先前使用多個 標記的方法面臨局限性，但本文提出了一種使用單一 屬性的可靠方法。

使用 canPlayType() 識別檔案類型:

要確定影片的適當檔案類型，我們可以利用 canPlayType() 函數。此函數傳回字串，指示瀏覽器對給定媒體類型的支援等級。例如：

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

根據canPlayType()的結果，我們可以動態地將

使用Vanilla JavaScript 實作：

以下程式碼片段示範如何使用vanilla 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();

這種方法允許動態來源切換，而沒有使用多個 標籤的缺點。它還確保影片將以瀏覽器支援的最合適的格式播放。