微信小程序多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要求英文路径
随机推荐
- 代码实现将键盘录入的数据拷贝到当前项目下的text.txt文件中,键盘录入数据当遇到quit时就退出
package com.looaderman.test; import java.io.FileNotFoundException; import java.io.FileOutputStream; ...
- 通过ssh管道连接内网数据库(mysql)
公网连接内网数据库(如云数据库)时,通常需要白名单:如果不是白名单IP,通常需要一个跳板机(类似代理)来连接内网数据库, 下方以mysql为例(其他数据库基本一致): import pymysql a ...
- laydate中设置动态改变max与min值的方法
参考网址: 原网址:https://blog.csdn.net/cherry_11qianqian/article/details/82259704 改进的网址:https://blog.csdn.n ...
- koa cookie使用
1 .Koa 中设置 Cookie 的值 ctx.cookies.set(name, value, [options]) 通过 options 置 设置 cookie name 的 value : ...
- nginx其他目录下上传站点
1.查看主配置文件 [root@bogon ~]# cat /etc/nginx/nginx.conf user root root; worker_processes auto; worker_rl ...
- C基础知识(1):基本数据类型
C的基本数据类型包括整型和浮点型,长度及精度信息如下: #include <stdio.h> #include <limits.h> #include <float.h& ...
- PJzhang:今天才搞清身份证、银行卡……的编码规则
猫宁!!! 之前思考过常见证件的编码规则,抽空查了一下,发现挺有意思. 一般查询证件或者手机号归属地都是直接百度小工具,但是背后的查询机制如何,可能大多人不甚了解. 介绍几种生活中最 ...
- wms、wmts和wfs的区别
Web地图服务(WMS)利用具有地理空间位置信息的数据制作地图.其中将地图定义为地理数据可视的表现.这个规范定义了三个操作:GetCapabilities返回服务级元数据,它是对服务信息内容和要求参数 ...
- 通俗易懂的lambda表达式,不懂来找我!
lambda是Python编程语言中使用频率较高的一个关键字.那么,什么是lambda?它有哪些用法?网上的文章汗牛充栋,可是把这个讲透的文章却不多.这里,我们通过阅读各方资料,总结了关于Python ...
- VirtualBox下Centos6.8网络配置
win10环境下,VirtualBox和Centos6.8已经按照完毕,下面配置Centos6.8网络. 1.设置VirtualBox为桥接模式,具体的有三种联网方法,我们参考http://www.c ...