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