javascript - 如何使用 JavaScript 动态更改多个视频源？

Question

我正在尝试使用 onclick 动态更改视频源事件。

这是 HTML:

<video autoplay loop poster="1.jpg" id="bg">
    <source src="/static/media/1.webm" type="video/webm">
    <source src="/static/media/1.mp4" type="video/mp4">
</video>

在onclick我生成一个随机链接，然后更改 <video> 的来源元素:

window.onclick = function() {
    var randint = Math.floor(Math.random() * 10) + 1;
    var srcmp4 = "http://127.0.0.1:8888/static/media/" + randint.toString() + ".mp4";
    document.getElementById('bg').src=srcmp4;
};

如果我尝试以相同的方式访问源元素，通过为其分配一个 id:

<source id="webmid" src="/static/media/1.webm" type="video/webm">

我得到空值。

我想动态更改 .jpg、.webm、.mp4 链接。如何通过 JS 访问和分配视频标签内的多个源元素？

Answer 1

视频标签缺少宽度、高度和控件属性。试试这个:

<video width="320" height="240" id="bg" autoplay loop controls>
  <source src="/static/media/1.webm" type="video/webm">
  <source src="/static/media/1.mp4" type="video/mp4">
</video>

另外这里是新的 js:

window.onclick = function() {
  var randint = Math.floor(Math.random() * 10) + 1;
  var srcmp4 = "http://127.0.0.1:8888/static/media/" + randint.toString() + ".mp4";
  var video = document.getElementById('bg');
  var source = document.getElementByTagName('source');
  source = srcmp4;
  video.load();
};

更改后，源似乎根据 this 更改测试。