使用 JavaScript 定位 HTML 中的视频源

Question

通过 JavaScript 编辑源后，我的视频无法播放，你能帮我解决这个问题吗？

HTML : <video class="background-video" controls muted loop autoplay>
       <source id="vid_tag" type="video/mp4"></video>

JS : document.querySelector('#vid_tag').src = "_1/video/bvid_1.mp4"

Answer 1

可能是路径错误，可能是你写错了，浏览器找不到。

可能的解决方案：

(1) 修正 HTML:
ID应该写在<video>标签的设置中（不要放在<source>标签中）

<video id="vid_tag" class="background-video" controls muted loop autoplay>
<source src="nothing.mp4" type="video/mp4">
</video>

(2) 修复 JS:

将 document.querySelector('#vid_tag') 替换为更直接的内容，例如 document.getElementById("vid_tag")，您可以通过所需元素的特定 ID 访问。

document.getElementById("vid_tag").src = "_1/video/bvid_1.mp4"; //# set new src
document.getElementById("vid_tag").load(); //# decode (process) the new file

Answer 2

当您设置 <source> 元素的 src 属性时，您需要调用 <video> 的 .load() method 以获取新值：

document.querySelector("button").addEventListener("click", (evt) => {
  const url = "https://upload.wikimedia.org/wikipedia/commons/2/22/Volcano_Lava_Sample.webm";
  document.querySelector("source").src = url;
  document.querySelector("video").load(); // required
}, { once: true });

<video controls muted loop autoplay>
  <source id="vid_tag" type="video/webm">
</video>
<button>set source</button>

但是，如果您动态设置了 src，则最好不要再使用 <source>。
如果您使用它是因为它能够在面对不受支持的格式时回退，请改用 <video>.canPlayType() 方法：

document.querySelector("button").addEventListener("click", (evt) => {
  const url = "https://upload.wikimedia.org/wikipedia/commons/2/22/Volcano_Lava_Sample.webm";
  const video = document.querySelector("video");
  if (video.canPlayType("video/webm")) {
    video.src = url;
  }
  else {
    // to-do: load an other source
    console.warn("format is not supported");
  }
}, { once: true });

<video controls muted loop autoplay></video>
<button>set source</button>

使用 JavaScript 定位 HTML 中的视频源

Target video source in HTML with JavaScript

javascript

html

video

src