video标签 里source标签切换url，视频未替换

Question

1.代码如下
dom里source的 url已经变了，但是视频未变，还是最初始的那个。这是什么原因呢

  <video  controls preload="" >
    <source id="video" src="https://media.w3.org/2010/05/sintel/trailer.mp4">
  </video>
  <script>
    setTimeout(() => {
      document.querySelector('#video').src = "http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"
    }, 5000)
  </script>

Answer 1

我之前也遇到你这个情况 刚开始还能切换，等循环播放几次 再切换就不正常了

所以你应该把id="video"标签设置在video上，而不是<source>

<video  controls preload=""  id="video">
    <source src="https://media.w3.org/2010/05/sintel/trailer.mp4">
  </video>

Answer 2

当 video 中存在 source 标签的时候，浏览器渲染之后会自动去获取地址，即便地址改变，浏览器也不会再去获取地址。
如果只有一个 source 的情况下你可以考虑把地址放在 video 上通过修改 video src 的值再触发("#video").play();
如果有多个 source 的情况下可以动态插入 source 标签的方式，触发浏览器进行重排，从而去获取相应地址的文件进行播放。