微信小程序一个页面多个视频（video组件），限制一个播放，其它暂停

最新推荐文章于 2024-11-25 15:12:34 发布

原创

最新推荐文章于 2024-11-25 15:12:34 发布 · 5.6k 阅读

24 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序 #微信小程序video

本文介绍了如何在微信小程序中利用video组件实现页面内多个视频的管理，确保一次仅有一个视频播放，其余视频暂停。通过设置全局变量currentPlayId来跟踪当前播放的视频ID，结合videoContext对象的play()和pause()方法，实现视频播放控制。当点击新的视频时，暂停当前播放的视频并启动新选中的视频。

微信小程序一个页面多个视频（video组件），限制一个播放，其它暂停

html

    <view class='videoBoxTitle'>视频列表</view>
    <block wx:for="{
  
  {videoListData}}" wx:index='index' wx:key='id'>
      <video class="myVideo" id='{
  
  {item.id}}' autoplay='{
  
  {false}}' show-center-play-btn="{
  
  {true}}" controls poster="{
  
  {item.img}}" src='{
  
  {item.videosrc}}' bindplay="videoClickAction" data-index="{
  
  {index}}" data-id="{
  
  {item.id}}" data-even="{
  
  {item}}">
        <view class="videoItemTitle">{
  
  {item.title}}</view>
      </video>
    </block>
  </view>

js

  data: {
    // 当前播放id
    currentPlayId: '',
    videoContext: wx.createVideoContext("当前数组中随便一条视频的id，可使用第一条视频id", this),
    videoListData: [],
  },


<!-- 点击播放按钮触发事件-->
videoClickAction(event) {

    le