vue中通过数据双向绑定给video标签的src赋值,只有第一次有效,怎么解决?
场景:在一个视频列表页面,点击视频列表,则全屏播放视频。全屏播放是一个公用组件,每次点击视频列表则把该视频的播放地址通过vue的数据双休绑定到组件中的video标签,如下:<video controls="controls" :poster="videoThumb" playsinline id="playVideos"><source :src="videoUr...
·
场景:在一个视频列表页面,点击视频列表,则全屏播放视频。全屏播放是一个公用组件,每次点击视频列表则把该视频的播放地址通过vue的数据双向绑定到组件中的video标签,如下:
<video controls="controls" :poster="videoThumb" playsinline id="playVideos">
<source :src="videoUrl" type="video/mp4"/>
</video>
this.videoUrl = url;
this.videoThumb = thumb;
结果:第一次播放没有问题,从第二次开始仍然播放的是第一次播放的视频。
分析:vue绑定video标签的src属性无效,可以通过给DOM的src属性赋值,方法如下:
let videos = document.getElementById('playVideos');
videos.src = url;
更多推荐
已为社区贡献12条内容
所有评论(0)