如何动态更改 HTML5 中的视频源而不出现浏览器兼容性问题？

动态更改 HTML5 中的视频源

问题描述

尝试动态更改 HTML5

解决方案

要解决此问题，请考虑以下使用 canPlayType() 函数的方法：

const video = document.getElementById('video');

function changeSource(newUrl) {
  // Remove existing `<source>` tags
  while (video.children.length > 0) {
    video.removeChild(video.children[0]);
  }

  // Create a new `<source>` tag with the new URL
  const source = document.createElement('source');
  source.src = newUrl;

  // Determine the appropriate MIME type using `canPlayType()`
  const mimeType = video.canPlayType('video/mp4') ? 'video/mp4' : 'video/webm';
  source.type = mimeType;

  // Append the new `<source>` tag to the video element
  video.appendChild(source);

  // Reload the video
  video.load();
  video.play();
}

说明

此解决方案涉及删除现有的 标签，使用所需的 URL 创建一个新标签，并使用 canPlayType() 确定适当的 MIME 类型。然后，新源将附加到视频元素，并重新加载视频。这种方法在 Chrome 和 Firefox 中都有效。

以上是如何动态更改 HTML5 中的视频源而不出现浏览器兼容性问题？的详细内容。更多信息请关注PHP中文网其他相关文章！