<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播放暂停问题的更多相关文章

  1. [小程序开发] 微信小程序audio音频播放组件+api_wx.createAudioContext

    引言: audio是微信小程序中的音频组件,可以轻松实现小程序中播放/停止音频等自定义动作. 附上微信小程序audio组件的相关属性说明:https://mp.weixin.qq.com/debug/ ...

  2. 微信小程序后台音乐播放注意事项

    wx.seekBackgroundAudio(OBJECT) 作用:控制音乐播放进度. 注意: 该事件 会触发 wx.onBackgroundAudioPlay(CALLBACK) 事件 ,也就是相当 ...

  3. 微信小程序背景音频播放分享功能

    如果正常背景音频播放的话,只能跳转到自己对应的微信小程序,无法分享朋友圈,我们需要设置分享朋友圈,需要调用一个API 音频背景播放 注意:背景播放在锁屏后播放只支持IOS端,安卓端虽然可以播放,但是锁 ...

  4. 微信小程序之video组件与cover-view组件和cover-image组件灵活应用

    前言:最近忙着赶项目,没时间更博:希望和大家一起学习一起进步. 本人遇到的坑,以及爬出坑的方法:在某个微信小程序项目中,有这样一个需求:在滑块swiper组件和swiper-item组件中嵌套vide ...

  5. 微信小程序 写音乐播放器 slider组件 将value设置为0 真机测试滑块不能回到起点

    最近在用微信小程序写一个音频播放页面,做时间进度的时候用到了slider插件,但是在自然播放完成,或者上/下切换的时候,将slider的value属性值设为0,开发工具上滑块会回到起点,有效.但是真机 ...

  6. 微信小程序音频背景播放

    由于微信小程序官方将音频的样式固定死了,往往再工作中和UI设计师设计出来的样式不符,故一般都采用背景音频播放来实现自定义的UI样式的音频播放,即使用官网API提供的BackgroundAudioMan ...

  7. 微信小程序 背景音频播放遇到的深坑

    1.微信前台(聊天页)暂停后回到小程序,再点击播放,播放信息消失,无法续播 ios可以监听到 (onStop已经停止)事件, 安卓无法监听到,只能监听到普通的暂停事件. 2.

  8. 微信小程序之----video视频播放

    vidao 我现在看到的官方文档是不带danmu(弹幕)属性的,之前是有的,不过现在这个属性还可以生效.控制视频的状态可以根据video标签的唯一id得到一个对象实例.video组件并不具备actio ...

  9. 微信小程序 - ios不能播放背景音乐

    由以下原因导致的 1. 未设置标题(backgroundPlayer.title)或标题为空 2. url只能英文,不能出现空格以及其它字符(中文.韩文.日文等)- iOS要求英文路径

随机推荐

  1. 执行docker run命令时报错Get https://registry-1.docker.io/v2/: net/http: request canceled while waiting for connection (Client.Timeout exceeded while awaiting headers)

    一.解决办法: 修改host 二.步骤如下 2.1 安装dig工具  sudo apt-get install dnsutils -y (ubuntu下的安装方法) 2.2 找到registry-1. ...

  2. 2018年第一记:EDM策略分享-EDM营销的策略分析

    很久没有上博客园来更新下文章了,一则因为工作繁忙,二则对技术方面的研究时间花的少了,目前主要侧重于EDM营销方面的策略制定.很多人跟我说,做EDM营销都茫然无头绪,那么做EDM到底有什么策略呢?下面博 ...

  3. MR1和MR2的工作原理

    MapReduce1 分为6个步骤: 1.作业的提交 1).客户端向jobtracker请求一个新的作业ID(通过JobTracker的getNewJobId()方法获取,见第2步 2).计算作业的输 ...

  4. 认识一下 Kafka

    Kafka 基本概述 什么是 Kafka Kafka 是一个分布式流式平台,它有三个关键能力 订阅发布记录流,它类似于企业中的消息队列 或 企业消息传递系统 以容错的方式存储记录流 实时记录流 Kaf ...

  5. Go package(2) strings 用法

    go version go1.10.3 Go中的字符串用法,可以在 godoc.org 上查看语法和用法. 最简单的语法就是获取字符串中的子串 s := "hello world" ...

  6. maridb 主从复制

    maridb(>10.0)主从复制 1.环境说明 测试环境 系统版本:Ubuntu 16.04.5 LTS内核版本:4.4.0-141-generic x86_64MariaDB版本:mysql ...

  7. python-阿里镜像源-pip

    将pip源设置为国内 >>>windows 1 地址栏输入%appdata% 2 新建pip文件价 3 文件夹里建pip.ini 内容: [global] timeout = 600 ...

  8. 解决incorrect 'only available in ES6' warning (W119) with options `moz: true, esversion: 6` 报错问题

    很多同学在新建vue项目时,会遇到 incorrect 'only available in ES6' warning (W119) with options `moz: true, esversio ...

  9. 【VS开发】CTimeSpan类

    CTimeSpan类.        日期和时间类简介        CTime类的对象表示的时间是基于格林威治标准时间(GMT)的.CTimeSpan类的对象表示的是时间间隔.        CTi ...

  10. SpringBoot自动化配置之四:@Conditional注解详解

    前言 之前在分析spring boot 源码时导出可见@ConditionalOnBean 之类的注解,那么它到底是如何使用的以及其工作流程如何,我们这里就围绕以下几点来分析: @Conditiona ...