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

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>
阅读 14.6k
2 个回答

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

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

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

<video  controls preload=""  id="video">
    <source src="https://media.w3.org/2010/05/sintel/trailer.mp4">
  </video>
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题