如何动态更改 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中文网其他相关文章！