html5 video标签切换url不生效，还是播放初始url的视频

最新推荐文章于 2025-09-21 05:10:31 发布

原创最新推荐文章于 2025-09-21 05:10:31 发布 · 4k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#html #vue

html、css 专栏收录该内容

2 篇文章

订阅专栏

在构建一个基于Electron的音乐播放器应用时，遇到使用Vue.js动态绑定video标签src属性无法更新MV的问题。当尝试切换不同MV时，浏览器只会加载第一次的视频源。为了解决这个问题，通过给video标签添加ref属性，然后在watch中监听mvUrl的变化，每次变更时直接修改video元素的src属性，从而实现MV的正确切换。

最近在做一个桌面应用程序（一个基于electron的音乐播放器），在写mv播放界面时用到了video标签，代码如下：

<video width="520" height="400" controls style="cursor: pointer" autoplay >
    <source :src="mvUrl" type="video/mp4" />
 </video>

项目是用vue.js来构建UI的，如上图所示，source标签的src属性使用了vue的动态绑定。当我第一次点击歌曲的mv时，mv是能正常显示的，当我切换到另一首歌的mv时，发现显示的还是第一次的mv，后来发现原因是：当 video 中存在 source 标签的时候，浏览器第一次渲染之后会自动去获取地址，之后即使地址改变，浏览器也不会再去获取改变后的地址的对应的视频。

解决办法：既然不能动态地绑定url，那就动态的改变video标签

给video标签加一个id或者使用vue中ref属性，如下图：

<video width="520" height="400" controls style="cursor: pointer" autoplay ref="video">
    <source type="video/mp4" />
</video>

然后在watch中监控mv url的变化，每次都获取video的dom，然后把url赋给video的src属性，如下图所示：

 watch: {
    mvUrl(newValue, oldValue) {
      let video = this.$refs.video;
      video.src = this.mvUrl;
    }
  }