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

关键词：

微信小程序一个页面多个视频（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) 

    let _this = this;
    //当前即将要播放的视频ID
    let clickVideoId = event.currentTarget.dataset.even.id;
    //判断是否正在有视频播放
    if (_this.data.currentPlayId) 
      //有正在播放的视频
      //判断和上一个视频是否是同一个视频
      if (_this.data.currentPlayId != clickVideoId) 

        // _this.setData(
        //   videoContext: wx.createVideoContext(String(_this.data.currentPlayId), _this)
        // ,() => 
        _this.data.videoContext.pause();
        // )

        // 暂停上一个视频
        // _this.data.videoContext. pause();
        // 播放当前点击的视频
        _this.setData(
          videoContext: wx.createVideoContext(String(clickVideoId), _this)
        , () => 
          // 播放（次行代码可省略）
          _this.data.videoContext.play();
        )

        //更新正在播放视频id currentPlayId
        _this.setData(
          currentPlayId: clickVideoId
        )
      
    
    //没有正在播放的视频就直接保存clickVideoId
    else 
      _this.setData(
        currentPlayId: clickVideoId
      ,() => 
      //并且使用当前视频ID（clickVideoId）创建上下文videoContext，为了点击下条视频暂停该视频
        _this.setData(
          videoContext: wx.createVideoContext(String(clickVideoId), _this)
        )
      )
    
  ,

实现思路

1.通过全局变量currentPlayId保存当前播放视频的id，
2.判断当前是否有视频在播放：
如果有，则通过videoContext. pause()暂停当前播放的视频，使用方法videoContext.play()播放要播放的视频。更新正在播放的视频id到currentPlayId。
如果没有，则播放视频，并且将该视频id存储到currentPlayId。并且使用当前视频ID（clickVideoId）创建上下文videoContext。

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

微信小程序一个页面多个视频（video组件），限制一个播放，其它暂停html<viewclass='videoBoxTitle'>视频列表</view><!--循环请求到的视频数据，每一个视频都需要有id(id='item.id')--><bloc... 查看详情

微信小程序--video组件实现视频弹幕功能(代码片段)

微信小程序播放视频有相应的组件来实现，我们只需要调用即可，video组件的部分参数如下图： 完整参数见微信小程序官方文档PS：相关属性解析： danmu-list:弹幕列表 enable-danmu:是否显示弹幕 danmu-btn:弹幕按... 查看详情

微信小程序--video组件实现视频弹幕功能(代码片段)

微信小程序播放视频有相应的组件来实现，我们只需要调用即可，video组件的部分参数如下图： 完整参数见微信小程序官方文档PS：相关属性解析： danmu-list:弹幕列表 enable-danmu:是否显示弹幕 danmu-btn:弹幕按... 查看详情

微信小程序获取video视频的时长

参考技术A我们在微信小程序业务当中，经常会用嵌入视频到我们的页面当中去。我们可以通过微信小程序video自带的bindloadedmetadata事件去获取视频的一些信息。在video标签中加入该方法然后我们在JS文件中添加该方法 查看详情

微信小程序一个页面多个按钮分享怎么处理(代码片段)

首先呢，第一步先看api文档：组件：buttonhttps://developers.weixin.qq.com/miniprogram/dev/component/button.html框架-逻辑层-注册页面-页面事件处理函数:onShareAppMessagehttps://developers.weixin.qq.com/miniprogram/dev/framework/app-servi 查看详情

微信小程序自定义组件的使用(代码片段)

在小程序的设计中，可能存在很多个页面要使用同一个组件的情况，比如说，设计了4个页面，每个页面的顶部都需要显示一个搜索框，如果在每个页面都复制同一份搜索框的代码，也不能说不是个办法，但没必要这么麻烦，此... 查看详情

微信小程序——video使用总结(代码片段)

关于小程序video的一些基本使用方法，可点击这里稍作了解。 需求：1.默认显示封面；2.一个视频播放的时候，其他视频停止播放，并显示封面。 解决问题思路：1.通过wx:if判断当前视频是否是播放的状态，如果是就显示... 查看详情

怎么解决小程序中video随手势移动问题

...势移动。怎么才能把video组件固定在顶部呢？你好。关于微信小程序把video固定在页面顶端的问题，解决方案如下：1.videofixed布局会造成：视频移动，黑色底留下2.flex布局，video固定高度，自适应部分用scroll-view,代码如下：….grid-... 查看详情

小程序：播放视频(代码片段)

...eo视频安卓正常播放，iOS不能播放，为什么？|微信开放社区微信小程序video标签ios不能播放视频或视频黑屏_喜欢划水的咸鱼码畜的博客-CSDN博客https://www.jianshu.com/p/31f0593496ef小程序ios播放不了视频，时间显示00:00... 查看详情

微信小程序使用txv-miniprogram-plugin播放视频

参考技术A1.使用txv-miniprogram-plugin播放视频,地址https://github.com/tvfe/txv-miniprogram-plugin,方式很简单,在此记录我这边遇到的问题:在富文本中自定义了iframe标签用来标记txv-video,当富文本中包含多个视频时isNeedMutex属性不起作用,查询半... 查看详情

从零学习微信小程序——自定义组件(代码片段)

小程序支持组件化编程，这一点有点像React，可以将页面内的功能模块抽象成自定义组件，就类似于基础组件轮播图等…，这样可以将一个复杂的页面拆分成多个低耦合的模块，有助于代码维护。那么如何自定... 查看详情

从零学习微信小程序——自定义组件(代码片段)

小程序支持组件化编程，这一点有点像React，可以将页面内的功能模块抽象成自定义组件，就类似于基础组件轮播图等…，这样可以将一个复杂的页面拆分成多个低耦合的模块，有助于代码维护。那么如何自定... 查看详情

uniapp微信小程序video视频监听播放时间(代码片段)

uniapp微信小程序video视频监听播放时间使用uniapp开发微信小程序，需要实现这样的需求当我用户离开页面的时候，我就要记录下用户视频播放的那个地方然后第二次进来，接着离开时候的地方播放uniapp中video提供的方... 查看详情

微信小程序视频列表滑动无限循环（仿抖音）(代码片段)

...在下面2:实现功能：支持位置导航、拨打电话、复制微信号、分享、联系客服、解析腾讯视频地址和拖动视频进度功能，暂未添加评论留言功能，后期会逐步增加3:关于视频存储的问题，这里增加了腾讯视频方式&#x... 查看详情

微信小程序（或uniapp）引入腾讯视频插件播放视频

参考技术A注意：个人开发者无法使用登录微信公众平台，在你的小程序后台的设置-第三方服务—插件管理，搜索插件并点击添加。微信小程序：小程序的app.json里声明使用插件在使用插件的页面的js文件里使用插件的自定义组件... 查看详情

微信小程序自定义组件详解(代码片段)

微信小程序自定义组件详解自定义组件能够帮我们更好的复用代码和重构简化代码复杂度。一起来学习一下小程序自定义组件的内容吧。从小程序基础库版本1.6.3开始，小程序支持简洁的组件化编程。所有自定义组件相关特性都... 查看详情

wssearchview：一个简单方便的微信小程序搜索框页面组件

参考技术A该搜索框组件基于开源项目wxSearch进行了改进，主要有以下几个修改点：1.增加了注释，修改了一些bug，项目可以跑起来。2.为了解决搜索框和输入法界面重叠的问题，将搜索组件作为一个独立的页面。3.修改了界面样式... 查看详情

微信小程序——自定义组件生命周期(代码片段)

在我们日常的开发中，组件起着重要的作用。组件的应用场景有很多，比如，当某个板块在多个页面多次出现的时候，我们就需要用到组件。1.自定义组件创建一个component的文件夹，然后右键点击新建component在... 查看详情