微信小程序多video播放暂停问题
<swiper class="swiper" indicator-dots="{{indicatorDots}}" autoplay="{{flag}}" interval="5000" duration="{{duration}}" current="{{indexCurrent}}" bindchange='onSlideChangeEnd' id='{{indexCurrent}}'>
<block wx:for="{{videos}}" wx:for-index="index" wx:key="index">
<swiper-item class='video-item'>
<video id="myVideo{{index}}" src='{{item}}' controls="{{controls}}" custom-cache="{{cache}}" object-fit='cover' show-center-play-btn="{{playBtn}}" autoplay='{{true}}' wx:if='{{index==indexCurrent}}'></video>
<image class='video-play-btn' wx:if='{{index!=indexCurrent}}' mode='widthFix' data-index='{{index}}' bindtap='videoPlay' src='/pages/images/bofang.png'></image>
</swiper-item>
</block>
</swiper>
//获取应用实例
var app = getApp(); Page({ /**
* 页面的初始数据
*/
data: {
indicatorDots: true,
controls: true,
playBtn: false,
duration: 1000,
cache: false,
indexCurrent: null,
videos:['.....','....','.....']
},
videoPlay: function (e) {
var curIdx = e.currentTarget.dataset.index;
// 没有播放时播放视频
if (!this.data.indexCurrent) {
this.setData({
indexCurrent: curIdx
})
var videoContext = wx.createVideoContext('myVideo' + curIdx) //这里对应的视频id
videoContext.play()
} else { // 有播放时先将prev暂停,再播放当前点击的current
var videoContextPrev = wx.createVideoContext('myVideo' + this.data.indexCurrent)
if (this.data.indexCurrent != curIdx) {
videoContextPrev.pause()
}
this.setData({
indexCurrent: curIdx
})
var videoContextCurrent = wx.createVideoContext('myVideo' + curIdx)
videoContextCurrent.play()
}
}
}
})
.video-item{
position: relative;
width: 100%;
height: 420rpx;
}
.video-item .video-play-btn {
position: absolute;
width: 100rpx;
height: 100rpx;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto
}
微信小程序多video播放暂停问题的更多相关文章
- [小程序开发] 微信小程序audio音频播放组件+api_wx.createAudioContext
引言: audio是微信小程序中的音频组件,可以轻松实现小程序中播放/停止音频等自定义动作. 附上微信小程序audio组件的相关属性说明:https://mp.weixin.qq.com/debug/ ...
- 微信小程序后台音乐播放注意事项
wx.seekBackgroundAudio(OBJECT) 作用:控制音乐播放进度. 注意: 该事件 会触发 wx.onBackgroundAudioPlay(CALLBACK) 事件 ,也就是相当 ...
- 微信小程序背景音频播放分享功能
如果正常背景音频播放的话,只能跳转到自己对应的微信小程序,无法分享朋友圈,我们需要设置分享朋友圈,需要调用一个API 音频背景播放 注意:背景播放在锁屏后播放只支持IOS端,安卓端虽然可以播放,但是锁 ...
- 微信小程序之video组件与cover-view组件和cover-image组件灵活应用
前言:最近忙着赶项目,没时间更博:希望和大家一起学习一起进步. 本人遇到的坑,以及爬出坑的方法:在某个微信小程序项目中,有这样一个需求:在滑块swiper组件和swiper-item组件中嵌套vide ...
- 微信小程序 写音乐播放器 slider组件 将value设置为0 真机测试滑块不能回到起点
最近在用微信小程序写一个音频播放页面,做时间进度的时候用到了slider插件,但是在自然播放完成,或者上/下切换的时候,将slider的value属性值设为0,开发工具上滑块会回到起点,有效.但是真机 ...
- 微信小程序音频背景播放
由于微信小程序官方将音频的样式固定死了,往往再工作中和UI设计师设计出来的样式不符,故一般都采用背景音频播放来实现自定义的UI样式的音频播放,即使用官网API提供的BackgroundAudioMan ...
- 微信小程序 背景音频播放遇到的深坑
1.微信前台(聊天页)暂停后回到小程序,再点击播放,播放信息消失,无法续播 ios可以监听到 (onStop已经停止)事件, 安卓无法监听到,只能监听到普通的暂停事件. 2.
- 微信小程序之----video视频播放
vidao 我现在看到的官方文档是不带danmu(弹幕)属性的,之前是有的,不过现在这个属性还可以生效.控制视频的状态可以根据video标签的唯一id得到一个对象实例.video组件并不具备actio ...
- 微信小程序 - ios不能播放背景音乐
由以下原因导致的 1. 未设置标题(backgroundPlayer.title)或标题为空 2. url只能英文,不能出现空格以及其它字符(中文.韩文.日文等)- iOS要求英文路径
随机推荐
- invalid new-expression of abstract class type 'CurveFittingEdge'
目录 一 报错原因 注:原创不易,转载请务必注明原作者和出处,感谢支持! 一 报错原因 今天遇到了一个之前从未遇到的报错: error: invalid new-expression of abstr ...
- Java爬虫爬取京东商品信息
以下内容转载于<https://www.cnblogs.com/zhuangbiing/p/9194994.html>,在此仅供学习借鉴只用. Maven地址 <dependency ...
- Jmeter之Cookie和Session处理
Jmeter之Cookie和Session处理 1.Cookie 添加方式:线程组-配置元件-HTTP Cookie 管理器,如下图: 2.Session 添加方式:线程组-前置处理器 -HTTP U ...
- Qt 之水平/垂直布局(QBoxLayout、QHBoxLayout、QVBoxLayout)
简述QBoxLayout可以在水平方向或垂直方向上排列控件,由QHBoxLayout.QVBoxLayout所继承. QHBoxLayout:水平布局,在水平方向上排列控件,即:左右排列. QVBox ...
- Redis ==> 集群的三种模式
一.主从同步/复制 通过持久化功能,Redis保证了即使在服务器重启的情况下也不会丢失(或少量丢失)数据,因为持久化会把内存中数据保存到硬盘上,重启会从硬盘上加载数据. 但是由于数据是存储在一台服务器 ...
- JAVA8中Predicate,Consumer,UnaryOperator,Function接口的应用
笔者平时时间有限,直接贴代码,关于几个接口的差别,可以查看这两篇文章 感受lambda之美,推荐收藏,需要时查阅 https://juejin.im/post/5ce66801e51d455d850d ...
- MySQL数据库5.7全文索引的坑
1.引擎必须是MyIsAm 2.创建全文索引:ALTER TABLE articles ADD FULLTEXT (title,body); 3.注意全文搜索的字段必须等于或者大于4个字节才会有效 4 ...
- Jenkins - 【转】高效插件推荐
特别说明:本文是在原文基础上的改写和添加,但总体不影响原文表达,特此说明. 原文链接 - Jenkins 高效插件推荐 | 运维生存时间 前言 开源版本的Jenkins具有三大能力: Master-S ...
- app测试基础知识之命令
app测试点:功能测试,安全测试,用户体验测试,交叉事件测试,兼容性测试,性能测试,安装/升级/卸载 ,UI测试 命令操作: adb connect 名 adb devices adb instal ...
- Mybatis操作数据时出现:java.sql.SQLSyntaxErrorException: Unknown column 'XXX' in 'field list'
这个错误比较重要,而且很常见,故单独进行说明: Mybatis出现:Unknown column 'xxx' in 'field list' 先来看一下程序的内部: dao.addUser(" ...