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


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 相关文章推荐
showModalDialog 和 showModelessDialog
Jan 22 Javascript
javascript 自定义事件初探
Aug 21 Javascript
javascript:history.go()和History.back()的区别及应用
Nov 25 Javascript
Js动态添加复选框Checkbox的实例方法
Apr 08 Javascript
jQuery拖拽排序插件制作拖拽排序效果(附源码下载)
Feb 23 Javascript
Javascript类型系统之undefined和null浅析
Jul 13 Javascript
JavaScript中获取时间的函数集
Aug 16 Javascript
js 输入框 正则表达式(菜鸟必看教程)
Feb 19 Javascript
原生js简单实现放大镜特效
May 16 Javascript
JavaScript模板引擎原理与用法详解
Dec 24 Javascript
vue+moment实现倒计时效果
Aug 26 Javascript
JS如何实现网站中PC端和手机端自动识别并跳转对应的代码
Jan 08 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
Ajax PHP 边学边练 之三 数据库
2009/11/26 PHP
PHP zip扩展Linux下安装过程分享
2014/05/05 PHP
PHP5.3安装Zend Guard Loader图文教程
2014/09/29 PHP
PHP中echo,print_r与var_dump区别分析
2014/09/29 PHP
简单的pgsql pdo php操作类实现代码
2016/08/25 PHP
PHP进阶学习之垃圾回收机制详解
2019/06/18 PHP
laravel-admin select框默认选中的方法
2019/10/03 PHP
Array.prototype 的泛型应用分析
2010/04/30 Javascript
js实现最短的XML格式化工具实例
2015/03/12 Javascript
Bootstrap按钮组件详解
2016/04/26 Javascript
Bootstrap框架的学习教程详解(二)
2016/10/18 Javascript
js模态对话框使用方法详解
2017/02/16 Javascript
深入浅析JavaScript中的RegExp对象
2017/09/18 Javascript
PHP 实现一种多文件上传的方法
2017/09/20 Javascript
JavaScript实现离开页面前提示功能【附jQuery实现方法】
2017/09/26 jQuery
Angular4的输入属性与输出属性实例详解
2017/11/29 Javascript
微信小程序表单验证功能完整实例
2017/12/01 Javascript
vue-star评星组件开发实例
2018/03/01 Javascript
基于vue-router 多级路由redirect 重定向的问题
2018/09/03 Javascript
Javascript Dom元素获取和添加详解
2019/09/24 Javascript
vue el-table实现自定义表头
2019/12/11 Javascript
Python os模块介绍
2014/11/30 Python
Python HTTP客户端自定义Cookie实现实例
2017/04/28 Python
Python元组操作实例分析【创建、赋值、更新、删除等】
2017/07/24 Python
python中时间模块的基本使用教程
2019/05/14 Python
python3.7 的新特性详解
2019/07/25 Python
英国领先的在线旅游和休闲零售商:lastminute.com
2019/01/23 全球购物
自然健康的概念:Natural Healthy Concepts
2020/01/26 全球购物
社区党建工作汇报材料
2014/08/14 职场文书
工商局所长四风自我剖析及整改措施
2014/10/26 职场文书
终止劳动合同证明书样本
2014/11/19 职场文书
歌咏比赛主持词
2015/06/29 职场文书
2016年党员学习廉政准则心得体会
2016/01/20 职场文书
2016中秋节广告语
2016/01/28 职场文书
vscode中使用npm安装babel的方法
2021/08/02 Javascript
MyBatis在注解上使用动态SQL方式(@select使用if)
2022/07/07 Java/Android