如何動態變更 HTML5 影片標籤的來源？

更改 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();

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

以上是如何動態變更 HTML5 影片標籤的來源？的詳細內容。更多資訊請關注PHP中文網其他相關文章！