微信小程序 - 同一页面存在多个video时，video无法正常播放一直在加载转圈解决方案

小安吖~

已于 2023-12-06 08:43:29 修改

阅读量2.7k

点赞数 11

CC 4.0 BY-SA版权

文章标签：前端数据库

于 2023-12-05 21:22:45 首次发布

本文链接：https://blog.csdn.net/Aan___/article/details/134815312

注：不建议同个页面使用多个video组件，建议不超过3个video，如果要实现video列表功能，请进行优化（image列表，选中时将image替换成video)

1. 防止视频封面与图片不一致，使用 poster 属性修改视频封面为图片封面

2. 条件判断视频的 id 等于播放视频的 id 时在将视频展示，不一致时显示图片

3. 为图片设置点击事件，用于切换视频进行播放

wxml页面：

<scroll-view class="videoScroll" scroll-y>
    <view class="videoItem" wx:for="{{videoList}}" wx:key="id">
        <!-- 光靠video组件模式是无法实现暂停上一个，播放下一个的操作功能 -->
        <video 
            src="{{item.data.urlInfo.url}}"
            object-fit="fill" 
            id="{{item.data.vid}}"
            poster="{{item.data.coverUrl}}"
            wx:if="{{videoId === item.data.vid}}"
        />
        <image 
            src="{{item.data.coverUrl}}"
            id="{{item.data.vid}}" 
            bindplay="handlePlay"
            wx:else
        />
    </view>
</scroll-view>

js页面：

handlePlay(e){
    this.vid = e.currentTarget.id;
    this.setData({
        videoId:this.vid
    });
    this.videoContext =wx.createVideoContext(this.vid);
    this.videoContext.play();
}

优化：

微信小程序 - 视频进度控制-CSDN博客