影片标记JavaScript来源

Question

使用视频标签时，通常会使用多个来源。

对于以下代码：

<script>    

window.onload = function() {
  if (/* conditions */ window.innerWidth >= 769) 
    document.querySelector("video").src = "https://x.com/assets/video.webm";
}

</script>

如何添加备用视频源，即。 https://x.com/assets/video.mp4而不覆盖先前的来源？另外，如何为每种类型添加源类型？ （即type =“ video / mp4”）

Answer 1

使用多个<source>元素作为<video>的子元素，而不是简单地设置src本身的<video>属性。

Answer 2

您应该使用源标签并更改其src值（请检查此示例：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/source）。

例如：

const video = document.createElement('video');
const source1 = document.createElemnent('source');
source1.src = 'https://....'
const source2 = document.createElemnent('source');
source2.src = 'https://...';
video.appendChild(source1);
video.appendChild(source2);

这将创建具有两个来源的视频标签。