微信小程序 - 控制视频播放上一个下一个

1. 想要显示视频列表，最原始的方式是利用视频的组件进行列表的显示立生的问题:
        1)列表的性能极差
        2)想要进行视频播放，声音可能因为几个视频播放以后会串音

注：光靠video组件模式是无法实现暂停上一个视频，播放下一个视频的操作功能

2.因为视频播放，播放的时候应该只有一个视频在播放，那么就需要考虑用事件触发的模式进行操作

        1)想要用事件触发的模式，那么就意味着需要使用AP操作
        2)想要用API模式，就必须先创建视频播放的上下文实例对象
        3)你还得正确的找到这个实例对象
        4)如果用的是函数的局部作用域变量，那么，每次点击都会生成一个新的实例对象，那么就会导致上一个视频无法暂停

解决：

点击下方链接使用官方文档VideoContext实现视频播放上一个下一个效果

VideoContext | 微信开放文档

1. 首先给我们定义video标签设置一个id

2. 绑定一个事件 bindplay：当开始/继续播放时触发play事件

3.必须要找到上一个操作的实例，以及控制当前的实例，所以最好的方式使用的是单例模式

        1)使用单例模式的基础是将实例对象挂载到this上
        2)正是因为单例，所以我们将上一个视频进行stop停止操作，然后再进行新的实例化对象操作，这时候新的实例对象会将原来的实例对象进行覆盖，那么我们操作的也就是只有一个实例对象，也就是当前的实例对象

        3)既然有一个当前的实例对象，那么就可以对它进行play的播放操作

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="filu" 
            bindplay="handlePlay"
            id="{{item.data.vid}}"
        />
    </view>
</scroll-view>

js页面内容：

handleplay(e){
    // 如果你已经在进行视频播放了，说明已经有上下文，那么我就将你进行停止
    this.vid !== e.currentTarget.id && this.videoContext && this.videoContext.stop();

    // JS的设计模式 (单例模式)
    // let vid = e.currentTarget.id;
    this.vid = e.currentTarget.id; //对上方代码进行优化

    // 既然已经将原来的视频停止了，那么我就重新创建一个新的视频播放实例
    // 单例的应用
    this.videoContext = wx.createVideoContext(this.vid);
}

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