小程序视频列表中视频的播放与停止的示例代码


Posted in Javascript onJuly 20, 2018

效果类似一条视频的小程序,就是视频列表,然后每个视频上覆盖一张视频的封面图,点击封面图的播放按钮视频播放,点击别的视频的时候,停止播放当前视频,播放点击的视频。差不多是这样:

小程序视频列表中视频的播放与停止的示例代码

一条视频

首先上代码:

wxml

<block wx:for="{{videoList}}">
  <view class='video-item'>
   <view class='wrapper'>
     <video class='video-video' wx:if='{{index==videoIndex}}' id='video{{index}}' autoplay='{{true}}' show-center-play-btn="{{false}}" src='{{item.resource_add}}'></video>
     <image class='video-video2' wx:if='{{index!=videoIndex}}' mode='aspectFill' src='{{item.coverimg}}'></image>
     <image class='videoPlay' wx:if='{{index!=videoIndex}}' data-index='{{index}}' bindtap='videoPlay' src='/images/icon/play.png'></image>
    </view>
    <view class='video-name'>{{item.title}}</view>
    <view class='video-desc' style="{{item.upStatus?'':'display:-webkit-box'}}">{{item.description}}</view>
    <view class='video-bottom'>
      <view class='video-btn' data-index="{{index}}" bindtap='upDown'>
        <image hidden='{{item.upStatus}}' src='/images/icon/slide.png'></image>
        <image hidden='{{!item.upStatus}}' src='/images/icon/up.png'></image>
        <text>{{!item.upStatus?'展开':'收起'}}</text>
      </view>
    </view>
  </view>
</block>

js

videoPlay(event){
  var index = video.getDataSet(event, 'index');

  if (!this.data.videoIndex) { // 没有播放时播放视频
    this.setData({
      videoIndex: index
    })     
    var videoContext = wx.createVideoContext('video' + index)
    videoContext.play()
  } else {
    var videoContextPrev = wx.createVideoContext('video' + this.data.videoIndex)
    videoContextPrev.stop()
    this.setData({
      videoIndex: index
    }) 
    var videoContextCurrent = wx.createVideoContext('video' + index)
    videoContextCurrent.play()
  }
},

在页面布局上,我们让视频的封面图定位在视频的容器中,将播放按钮定位到视频容器中,且层级最高。因为需求是点击封面图上的播放按钮视频开始播放,所以将show-center-play-btn设置为flase。在循环绑定数据时,将循环的index拼成视频的ID,将循环的index作为属性绑定到播放按钮。

在JS中,首先我们设置videoIndex来表示当前播放的视频在列表中的位置,它的初始值为null。

视频的播放与暂停

当点击事件发生时,首先获取点击的index,然后判断videoIndex的值:

  1. 如果videoIndex值为null,则表示这是第一次点击,将index绑定到videoIndex上,然后通过var videoContext = wx.createVideoContext('video' + index)来获取当前点击的视频,并使用videoContext.play()将视频进行播放。
  2. 如果videoIndex的值不为null,则表示这不是第一次点击,我们首先应该将正在播放的视频停止,然后在播放点击的视频。此时,videoIndex的值表示正在播放的视频在列表中的位置,我们通过var videoContextPrev = wx.createVideoContext('video' + this.data.videoIndex)来获取正在播放的视频上下文,然后通过videoContextPrev.stop()把它停止。最后我们将获取到的index值重新绑定到videoIndex上表示点击视频的序号,然后重复步骤一。

封面图处理

我们已经给封面图和封面图上的播放按钮进行处理了,用微信的wx:if或者hidden就可以了,当videoIndex等于index的时候,表示要播放这个视频,将视频显示并播放,封面图和播放按钮隐藏就可以了。

一点小坑

一开始考虑到性能,由于wx:if在页面加载的时候并不渲染数据,频繁点击的话频繁渲染数据,有点影响性能,就采用了hidden方法,使用hidden方法处理封面图和播放按钮一点问题也没有,处理视频的话有时候会出现视频不播放,并且显示中间播放按钮的情况,所以采用了wx:if,这样页面开始渲染的时候不渲染视频,点击之后渲染视频,并且设置视频自动播放,就可以啦~~~

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
XHTML-Strict 内允许出现的标签
Dec 11 Javascript
jquery 必填项判断表单是否为空的方法
Sep 14 Javascript
jquery的ajax请求全面了解
Mar 20 Javascript
js判断undefined类型示例代码
Feb 10 Javascript
JQuery实现的按钮倒计时效果
Dec 23 Javascript
JS验证逗号隔开可以是中文字母数字
Apr 22 Javascript
JavaScript中removeChild 方法开发示例代码
Aug 15 Javascript
基于JavaScript实现跳转提示页面
Sep 24 Javascript
bootstrap-table组合表头的实现方法
Sep 07 Javascript
jQuery基于Ajax实现读取XML数据功能示例
May 31 jQuery
vue2中使用sass并配置全局的sass样式变量的方法
Sep 04 Javascript
解决angularjs WdatePicker ng-model的问题
Sep 13 Javascript
微信小程序实现topBar底部选择栏效果
Jul 20 #Javascript
JS+H5 Canvas实现时钟效果
Jul 20 #Javascript
详解处理bootstrap4不支持远程静态框问题
Jul 20 #Javascript
基于Vue+element-ui 的Table二次封装的实现
Jul 20 #Javascript
webpack+vue-cil中proxyTable处理跨域的方法
Jul 20 #Javascript
详解vue-cli官方脚手架配置
Jul 20 #Javascript
Vue中的异步组件函数实现代码
Jul 20 #Javascript
You might like
smarty静态实验表明,网络上是错的~呵呵
2006/11/25 PHP
PHP错误抑制符(@)导致引用传参失败Bug的分析
2011/05/02 PHP
关于php连接mssql:pdo odbc sql server
2011/07/20 PHP
javascript之更有效率的字符串替换
2008/08/02 Javascript
使用javascript:将其它类型值转换成布尔类型值的解决方法详解
2013/05/07 Javascript
异步动态加载js与css文件的js代码
2013/09/15 Javascript
jQuery中使用data()方法读取HTML5自定义属性data-*实例
2014/04/11 Javascript
关于js里的this关键字的理解
2015/08/17 Javascript
JavaScript数据操作_浅谈原始值和引用值的操作本质
2016/08/23 Javascript
微信小程序 开发工具快捷键整理
2016/10/31 Javascript
JS移动端/H5同时选择多张图片上传并使用canvas压缩图片
2017/06/20 Javascript
jquery.onoff实现简单的开关按钮功能(推荐)
2018/05/24 jQuery
React 组件渲染和更新的实现代码示例
2019/02/21 Javascript
JS匿名函数内部this指向问题详析
2019/05/10 Javascript
Vue.js中使用Vuex实现组件数据共享案例
2020/07/31 Javascript
[03:49]DOTA2 2015国际邀请赛中国区预选赛第二日现场百态
2015/05/27 DOTA
c++生成dll使用python调用dll的方法
2014/01/20 Python
Python的ORM框架SQLAlchemy入门教程
2014/04/28 Python
解决windows下Sublime Text 2 运行 PyQt 不显示的方法分享
2014/06/18 Python
python如何派生内置不可变类型并修改实例化行为
2018/03/21 Python
Python读取properties配置文件操作示例
2018/03/29 Python
Python中的集合介绍
2019/01/28 Python
在Python中表示一个对象的方法
2019/06/25 Python
python挖矿算力测试程序详解
2019/07/03 Python
python 实现dict转json并保存文件
2019/12/05 Python
html5定位并在百度地图上显示的示例
2014/04/27 HTML / CSS
澳大利亚免息网上购物:Shop Zero
2016/09/17 全球购物
农救科工作职责
2013/11/27 职场文书
会计与审计专业自荐信范文
2014/03/15 职场文书
干部考核评语
2014/04/29 职场文书
行政秘书工作自我鉴定
2014/09/15 职场文书
辛亥革命观后感
2015/06/02 职场文书
创业计划书之书店
2019/09/10 职场文书
解决SpringCloud Feign传对象参数调用失败的问题
2021/06/23 Java/Android
Python中文分词库jieba(结巴分词)详细使用介绍
2022/04/07 Python
Redis官方可视化工具RedisInsight安装使用教程
2022/04/19 Redis