场景:在一个视频列表页面,点击视频列表,则全屏播放视频。全屏播放是一个公用组件,每次点击视频列表则把该视频的播放地址通过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;

 

Logo

前往低代码交流专区

更多推荐