首页 > web前端 > js教程 > 正文

如何动态更改 HTML5 视频标签的来源?

Linda Hamilton
发布: 2024-11-13 14:20:02
原创
881 人浏览过

How to Dynamically Change the Source of an HTML5 Video Tag?

更改 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中文网其他相关文章!

来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板