【微信小程序学习】解决多个视频同时播放的问题

我们这里用到了单例模式

单例模式：

1、需要创建多个对象的场景下，通过一个变量接收，一直保持只有一个对象

2、节省内存空间

问题：多个视频同时播放的问题

点击视频1播放后，再点击视频2，视频1会暂停，播放视频2。

需求：

1、点击播放的事件中需要找到上一个播放的视频

2、在播放新的视频之前关闭上一个正在播放的视频

关键：

1、如何找到上一个视频的实例对象

2、如何确认点击播放的视频和正在播放的视频不是同一个视频

解决方法：

//点击播放/继续播放的回调handleplay(event){let vid = event.currentTarget.id;//关闭上一个播放的数据this.vid !== vid && this.videoContext && this.videoContext.stop();  //前面加上&&因为 stop会显示未定义// if(this.vid!==vid){//   if(this.videoContext){//     this.videoContext.stop()//   }// }this.vid = vid;//创建控制video标签的实例对象this.videoContext = wx.createVideoContext(vid);},

bindplay组件

VideoContext API 需要获取视频的id

【微信小程序学习】解决多个视频同时播放的问题相关推荐

微信小程序：全新强大的恋爱话术微信小程序源码土味情话视频号or自媒体操作项目
你猜的不错,这就是一款恋爱话术小程序该款小程序相对来说还是挺强大的而且还融合了小编前段时间发布的一款土味情话在里面这款小程序基本分段都是和外面几千块几百块的分段是一样的如有分段是: 开场阶段丨 ...
2020微信小程序学习报告.2.17-3.1.（三）
微信小程序学习报告应学校课程要求,特此记录首先,小程序知识点: wx.request的使用:发https请求,一个小程序同时只能有5个网络请求,https的参数里,url是接口地址,method是请求 ...
微信小程序学习（1）-基础开发
学习微信小程序微信小程序学习(1) 微信小程序学习(2) 文章目录学习微信小程序注册和初始化小程序配置 tabbar导航栏模板插样与WXML 循环渲染条件渲染模板微信小程序脚本WXS ...
微信小程序：长期稳定短视频去水印
大家好这一款小程序源码是一款去水印小程序源码该源码里面自带了稳定接口(目前该接口已稳定运行三个月) 支持多种短视频平台去水印,另外也支持图集去水印保存已经去好水印的作品的时候可以根据是短视频还是图 ...
视频教程-2020最新微信小程序基础+实战精讲视频-微信开发
2020最新微信小程序基础+实战精讲视频负责过多个软件项目的研发.设计和管理工作,拥有项目管理师认证.项目监理师中级认证.出版过的图书有<微信小程序开发图解案例教程><Axure ...
微信小程序学习：（五）swiper塌陷问题解决
微信小程序学习:(五)swiper塌陷问题解决 github地址: https://github.com/leoricding/- (一)问题分析需求:实现tab切换,内容切换:内容切换,tab也切 ...
微信小程序学习（加深）
微信小程序学习(加深) 一.wx:if 与 hidden 的对比 wx:if 以动态创建和移除元素的方式,控制元素的展示与隐藏 hidden 以切换样式的方式(display: none/block; ...
微信小程序学习Course 8 本地缓存API
微信小程序学习Course 8 本地缓存API 本篇随笔主要介绍微信小程序本地缓存API函数,微信小程序可以在本地缓存一些关键词数据,每一条关键词对应一段字符串.微信小程序提供了以下API函数. 8. ...
微信小程序js数组初始化_微信小程序学习Course 3-2 JS数组对象学习
微信小程序学习Course 3-2 JS数组对象学习本节主要介绍JS中的数组. 3-2.1 数组的声明数组声明的方式多种,如下例.一般我们可以先创建一个空数组,然后再填充. var names = ...
小程序 pagescrollto_微信小程序学习笔记（三）-- 首页及详情页开发
一.常用组件在上一个章节中讲解了封装请求数据的模块,在此处请求轮播图的数据 1.首页轮播图数据的请求以及渲染 1.1 轮播图数据的请求 pages/home/home.js import 2 使用组 ...

【微信小程序学习】解决多个视频同时播放的问题

【微信小程序学习】解决多个视频同时播放的问题相关推荐

最新文章

热门文章