微信小程序video标签如何在其他视频播放时让另一个视频暂停播放-demo-Toy模板网

这篇具有很好参考价值的文章主要介绍了微信小程序video标签如何在其他视频播放时让另一个视频暂停播放-demo。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

演示

小程序视频标签,小程序,微信小程序,音视频,小程序

需求

一个页面同时有很多视频播放，当用户点击一个视频后，开始播放视频，当点击另一个视频后，暂停前一个播放视频，让当前页面只有一个视频处于播放状态

原理

播放视频时，先判断当前是否有视频正在播放，如果没有，则播放，如果有，则暂停其他视频，再播放当前视频文章来源地址https://www.toymoban.com/news/detail-763994.html

源码

wxml

<view wx:for="{{videos}}" class="recordItem_hot" wx:key="{{index}}" data-item='{{item}}'>
  <video class="cover_img" src="{{item.url}}" objectFit="cover" show-fullscreen-btn id="video{{index}}" bindtap="video_play" />
  <view class="hot_name">
    <view class="name_view">{{item.title}}</view>
  </view>
</view>

js

Page({
	/**
   * 页面的初始数据
   */
  data: {
    videos:[
      {
        url:'https://scenicpicture.umituo.com/upload/video/0387064bad8464868ae292c8cb793f86.mp4',
        title:'视频一'
      },
      {
        url:'https://scenicpicture.umituo.com/upload/video/ec341fa007ce6943ed997f5b079ea44b.mp4',
        title:'视频二'
      },
      {
        url:'https://scenicpicture.umituo.com/upload/video/mmexport1645779520102.mp4',
        title:'视频三'
      },
    ],
    indexCurrent: null,
  },

  video_play(e) {
    let curIdx = e.currentTarget.id;
    // 没有播放时播放视频
    // console.log(curIdx)
    if (!this.data.indexCurrent) {
      this.setData({
        indexCurrent: curIdx
      })
      let videoContext = wx.createVideoContext(curIdx,this) //这里对应的视频id
      videoContext.play()
    } else { // 有播放时先将prev暂停，再播放当前点击的current
      let videoContextPrev = wx.createVideoContext(this.data.indexCurrent,this)//this是在自定义组件下，当前组件实例的this，以操作组件内 video 组件（在自定义组件中药加上this，如果是普通页面即不需要加）
      if (this.data.indexCurrent != curIdx) {
        console.log(123)
        videoContextPrev.pause()
        this.setData({
          indexCurrent: curIdx
        })
        let videoContextCurrent = wx.createVideoContext(curIdx,this)
        videoContextCurrent.play()
      }
    }
  },

})

到了这里，关于微信小程序video标签如何在其他视频播放时让另一个视频暂停播放-demo的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！