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


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 相关文章推荐
jQuery javaScript捕获回车事件(示例代码)
Nov 07 Javascript
浅谈JavaScript函数参数的可修改性问题
Dec 05 Javascript
node.js中的fs.lstatSync方法使用说明
Dec 16 Javascript
JS控制表格实现一条光线流动分割行的方法
Mar 09 Javascript
js ajaxfileupload.js上传报错的解决方法
May 05 Javascript
原生js实现节日时间倒计时功能
Jan 18 Javascript
从零学习node.js之express入门(六)
Feb 25 Javascript
Angular将填入表单的数据渲染到表格的方法
Sep 22 Javascript
vue路由跳转传参数的方法
May 06 Javascript
利用原生JS实现data方法示例代码
May 28 Javascript
Node.js从字符串生成文件流的实现方法
Aug 18 Javascript
微信小程序实现倒计时功能
Nov 19 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
substr()函数中文版
2006/10/09 PHP
杏林同学录(四)
2006/10/09 PHP
PHP strtr() 函数使用说明
2008/11/21 PHP
php中的boolean(布尔)类型详解
2013/10/28 PHP
浅谈php处理后端&amp;接口访问超时的解决方法
2016/10/29 PHP
Yii2实现ActiveForm ajax提交
2017/05/26 PHP
PHP中in_array的隐式转换的解决方法
2018/03/06 PHP
php封装实现钉钉机器人报警接口的示例代码
2020/08/08 PHP
使用jquery动态加载javascript以减少服务器压力
2012/10/29 Javascript
iframe 上下滚动条如何默认在下方实现原理
2012/12/10 Javascript
只需一行代码,轻松实现一个在线编辑器
2013/11/12 Javascript
轻松创建nodejs服务器(7):阻塞操作的实现
2014/12/18 NodeJs
任意Json转成无序列表的方法示例
2016/12/09 Javascript
js模块加载方式浅析
2017/08/12 Javascript
Angular中封装fancyBox(图片预览)遇到问题小结
2017/09/01 Javascript
nodejs高大上的部署方式(PM2)
2018/09/11 NodeJs
swiper.js插件实现pc端文本上下滑动功能示例
2018/12/03 Javascript
使用gulp构建前端自动化的方法示例
2018/12/25 Javascript
ES6 Object属性新的写法实例小结
2019/06/25 Javascript
VUE注册全局组件和局部组件过程解析
2019/10/10 Javascript
深入理解 TypeScript Reflect Metadata
2019/12/12 Javascript
python迭代器实例简析
2014/09/25 Python
Python程序员面试题 你必须提前准备!(答案及解析)
2018/01/23 Python
Python smtplib实现发送邮件功能
2018/05/22 Python
Python class的继承方法代码实例
2020/02/14 Python
Python使用qrcode二维码库生成二维码方法详解
2020/02/17 Python
python使用html2text库实现从HTML转markdown的方法详解
2020/02/21 Python
Django ORM filter() 的运用详解
2020/05/14 Python
介绍下java.util.Arrays类
2012/10/16 面试题
车间工艺员岗位职责
2013/12/09 职场文书
学校校庆演讲稿
2014/05/22 职场文书
党员教师批评与自我批评发言稿
2014/10/15 职场文书
个人党性锻炼总结
2015/03/05 职场文书
关于办理居住证的介绍信模板
2019/11/27 职场文书
python获取淘宝服务器时间的代码示例
2021/04/22 Python
MySQL高速缓存启动方法及参数详解(query_cache_size)
2021/07/01 MySQL