微信小程序多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要求英文路径
随机推荐
- Systemd 指令
Systemd 指令 原文:http://www.ruanyifeng.com/blog/2016/03/systemd-tutorial-commands.html 一.由来 历史上,Linux 的 ...
- OpenStack 的单元测试
目录 文章目录 目录 前言 单元测试能提高生产率 Python 单元测试工具清单 unittest Test Discover Test Fixture Test Suite Assert(断言) m ...
- weak_ptr用法
http://note.youdao.com/noteshare?id=39c10fda83320b2851e2073a5f69321c
- springboot jar启动 读取jar包中相对路径文件报错
jar包启动后读取相对路径文件报异常: Caused by: java.io.FileNotFoundException: class path resource [***.***] cannot b ...
- 【HANA系列】SAP HANA LEFT/RIGHT字符串截取
公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[HANA系列]SAP HANA LEFT/RI ...
- C和C++的静态函数和静态变量
1.C程序的静态变量和函数 引用自:https://blog.csdn.net/thanklife/article/details/78476737 作者:零点零一 C程序一直由下列部分组成 ...
- login 模块,re 模块
标准三流 标准输入流:sys. stdin # input的底层 标准输出流:sys. stdout # print的底层 标准错误流:sys. stderr # 异常及loggin ...
- seq2seq&attention图解
- kafka调优
kafka调优:[root@bi-kafka-1 bin]# pwd/data/kafka-9092/bincat kafka-server-start.sh if [ "x$KAFKA_H ...
- 通过java 来实现对多个文件的内容合并到一个文件中
现在有多个txt文本文件,需要把这么多个文件的内容都放到一个文件中去 以下是实现代码 package com.SBgong.test; import java.io.*; public class F ...