微信小程序之处理多个视频同时播放问题

电玩女神 2022-12-21 03:17 225阅读 0赞

# 微信小程序之处理多个视频同时播放问题 #

> 大家好，今天我们来学习一下怎么处理多个视频同时播放问题，好好看，好好学，超详细的。

## 第一步 ##

> 首先，我们来了解一下微信小程序视频的组件，进入[**小程序官方文档**][Link 1]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNzE1MzU0_size_16_color_FFFFFF_t_70_pic_center]

## 第二步 ##

> 直接上代码

<view class="videoItem" wx:for="{ {videoList}}" wx:key="id">
        <video src="{ {item.data.urlInfo.url}}" bindplay="handlePlay" id="{ {item.data.vid}}" >
         </video>
    </view>

.videoItem { 
      padding: 20rpx 3%;
    }
    .videoItem video{ 
      height: 360rpx;
      width: 100%;
      border-radius: 10rpx;
    }

data: { 
        videoList: [] //获取视频列表
      },
     handlePlay(event) { 
     	//这里的vid是视频的id，因为这里我是用接口传数据的，里面有视频id
        let vid = event.currentTarget.id;
        //关闭上一个播放的视频
        this.vid !== vid && this.videoContext && this.videoContext.stop();
        this.vid = vid;
        //创建控制视频标签的实例对象
        this.videoContext = wx.createVideoContext(vid);
      },

## 第三步 ##

> 可能很多小伙伴看不懂，我这里总结一下  
> 首先我们的问题是：多个视频同时播放

> **需求**：  
> 1. 在点击播放的事件中需要找到上一个播放的视频  
> 2. 在播放新的视频之前关闭正在播放的视频不是同一个视频

> **关键点**：  
> 1. 如何找到上一个视频的实例对象  
> 2. 如何确认点击播放的视频和正在播放的视频不是同一个  
> 如下图：

![在这里插入图片描述][20201114104129720.gif_pic_center]

## 结语 ##

> 关于微信小程序多个视频同时播放问题就介绍到这里 ，欢迎大家多多指教，互相交流，一起学习

[Link 1]: https://developers.weixin.qq.com/miniprogram/dev/component/video.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNzE1MzU0_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/988b95e5a4234ecb98479a976a17ae42.png
[20201114104129720.gif_pic_center]: /images/20221120/7ab39a6bbcd041859a79f7e6a31cc09e.png