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