如何动态切换HTML5视频源同时保持浏览器兼容性？

HTML5 视频的动态源切换

利用 HTML5 视频元素为跨不同平台的视频播放提供了多功能解决方案。然而，集成播放列表或菜单需要动态更改视频源。虽然天真地更新了标签可能看起来很简单，但浏览器兼容性带来了挑战。

具体来说，在 Firefox 中，更新多个 使用 load() 方法的标签会突然终止视频播放器。因此，更可靠的方法是在

Vanilla JavaScript 解决方案

要动态切换视频源，请考虑以下 vanilla JavaScript 片段：

var video = document.getElementById('video');
var source = document.createElement('source');

source.setAttribute('src', 'video-url.mp4');
source.setAttribute('type', 'video/mp4');

video.appendChild(source);
video.play();

setTimeout(() => {
  video.pause();

  source.setAttribute('src', 'video-url.webm');
  source.setAttribute('type', 'video/webm');

  video.load();
  video.play();
}, 3000);

兼容性注意事项

虽然提供的解决方案在 Chrome 中运行良好，但应验证其他浏览器的兼容性。此外，请考虑合并特定于浏览器的处理，以确保一致的用户体验。

以上是如何动态切换HTML5视频源同时保持浏览器兼容性？的详细内容。更多信息请关注PHP中文网其他相关文章！