最近在做一个桌面应用程序（一个基于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;
    }
  }