微信小程序实现当前页面多个视频文件只能播放一个视频，其他视频暂停，点击当前暂停当前

生而为人谁不付出谁不努力

实现的效果就是当前页面是一个视频列表，如果不处理的话，就会出现同时播放多个视频文件效果图如下同时播放了3个

下面是关键方法代码

//indexCurrent:null 这个是定义在page里面
videoPlay: function (e) {var that = this;var curIdx = e.currentTarget.dataset.index;// 有播放时先将prev暂停，再播放当前点击的currentif (that.data.indexCurrent != null) {var videoContextPrev = wx.createVideoContext('myVideo' + that.data.indexCurrent)if (that.data.indexCurrent != curIdx) {videoContextPrev.pause()}that.setData({indexCurrent: curIdx})var videoContextCurrent = wx.createVideoContext('myVideo' + curIdx)videoContextCurrent.play()} else {  // 没有播放时播放视频that.setData({indexCurrent: curIdx})var videoContext = wx.createVideoContext('myVideo' + curIdx) //这里对应的视频idvideoContext.play()}}

<video src="{{item.url}}" title="{{item.title}}" style="width:100%;height:332rpx;"  id="myVideo{{index}}"  data-index='{{index}}' bindplay="play" ></video>//视频切换暂停播放play(e) {var that = this;var id = e.currentTarget.id;for (var i = 0; i < that.data.healthKjList.length; i++) {if (id === 'myVideo' + i) {//console.log('播放视频不做处理');} else {//console.log('暂停其他正在播放的视频');var videoContext = wx.createVideoContext("myVideo"+i, that);videoContext.pause();}}},

下面是xml文件代码 healthKjList是你的视频列表

<block wx:for="{{healthKjList}}" wx:key="{{index}}"><li wx:if="{{index<2}}"><video src="{{item.url}}" style="width:100%;height:332rpx;"    id="myVideo{{index}}" bindtap="videoPlay" data-index='{{index}}' ></video><p>{{item.title}}</p></li></block>

主要属性和方法选中部分

还可以增加弹幕 danmu-list

danmuList: [{text: '第 1s 出现的弹幕',color: '#ff0000',time: 1},{text: '第 3s 出现的弹幕',color: '#ff00ff',time: 3}]

微信小程序实现当前页面多个视频文件只能播放一个视频，其他视频暂停，点击当前暂停当前相关推荐

微信小程序开发教程第七章：微信小程序编辑名片页面开发
前面我们更新了六篇的微信小程序开发教程,现在更新第七章:微信小程序编辑名片页面开发,(第一二章:微信小程序开发教程,第三四章:微信小程序项目结构以及配置&微信小程序首页面开发,第五章:微信小程 ...
Java Web项目，Android和微信小程序的初始页面配置
Java Web项目我们在Eclipse里开了Java Web项目之后,Run As Tomcat或者Apache服务器,本地运行,如果直接用http://localhost:8080访问项目,会发 ...
手机按三角返回页面上一页_小猿圈微信小程序跳转页面都有哪些？
随着科技的进步互联网的发展,微信小程序逐渐成为了很多推广渠道的入口,但是因为很多做前端的小伙伴们不知道怎么去实现跳转页面,弄得不知所措,今天小猿圈前端讲师就给你讲解几种微信小程序跳转页面方法. 微信小 ...
微信小程序跳转页面问题
微信小程序跳转页面的方式: 1.跳转至tabBar页面,并关闭其他所有非 tabBar页面 wx.switchTab({ url: '路径' //url同app.json中配置的tabBar路径 }) ...
微信小程序获取当前页面url
微信小程序获取当前页面url 微信小程序获取当前页面的URL地址
微信小程序个人中心页面开发
目录微信小程序创建项目配置底部导航栏微信小程序滚动播放内容微信小程序功能中心模块开发微信小程序个人中心页面开发微信小程序获取电话号码微信小程序显示列表数据微信小程序显示分页列表微信小程 ...
微信小程序--订单查询页面
微信小程序–订单查询页面包含功能点: 订单查询结构:order.wxml <tabs tabList="{{tabList}}" binditemChange=" ...
微信小程序内含H5页面实现方式
微信小程序内含H5页面实现方式一.背景众所周知,我们写完小程序,发到线上,是需要经历设置版本.提交代码审核.等待审核等步骤,放一个版本下来可能花费很多的时间,甚至很可能等待了很长时间,审核未通过, ...
微信小程序的一级页面和二级页面设置
微信小程序的一级页面和二级页面设置微信小程序中开发中,新建了page,在app.json里面设置了pages属性. 运行时,会出现报错. 报错截图: 报错原因: 这是由于,在微信小程序中app.js ...
微信小程序设置启动页面
微信小程序设置启动页面微信小程序运行成功需要跳转到启动页面: 微信小程序跳转启动页面主要有两种方法: 1.通过配置全局文件page.json进行配置在app.json文件中,pages数组,设置在 ...

微信小程序实现当前页面多个视频文件只能播放一个视频，其他视频暂停，点击当前暂停当前

微信小程序实现当前页面多个视频文件只能播放一个视频，其他视频暂停，点击当前暂停当前相关推荐

最新文章

热门文章