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


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获取元素索引值index()示例
Feb 13 Javascript
JavaScript中字符串分割函数split用法实例
Apr 07 Javascript
全面解析JavaScript中apply和call以及bind(推荐)
Jun 15 Javascript
JS实现的跨浏览器解析XML文件实例
Jun 21 Javascript
jqGrid用法汇总(全经典)
Jun 28 Javascript
JavaScript中使用Async实现异步控制
Aug 15 Javascript
webpack处理 css\less\sass 样式的方法
Aug 21 Javascript
基于Vue实现关键词实时搜索高亮显示关键词
Jul 21 Javascript
js+canvas实现验证码功能
Sep 21 Javascript
vue-cli3+typescript新建一个项目的思路分析
Aug 06 Javascript
nuxt+axios实现打包后动态修改请求地址的方法
Apr 22 Javascript
如何利用JavaScript实现二叉搜索树
Apr 02 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
自己做矿石收音机
2021/03/02 无线电
PHP中extract()函数的妙用分析
2012/07/11 PHP
Linux下CoreSeek及PHP扩展模块的安装
2012/09/23 PHP
phpadmin如何导入导出大数据文件及php.ini参数修改
2013/02/18 PHP
php中文繁体和简体相互转换的方法
2015/03/21 PHP
编写Js代码要注意的几条规则
2010/09/10 Javascript
qTip2 精致的基于jQuery提示信息插件
2012/02/17 Javascript
JavaScript高级程序设计(第3版)学习笔记8 js函数(中)
2012/10/11 Javascript
javascript实现tab切换的两个实例
2015/11/05 Javascript
json实现添加、遍历与删除属性的方法
2016/06/17 Javascript
vue router仿天猫底部导航栏功能
2017/10/18 Javascript
jQuery实现的淡入淡出图片轮播效果示例
2018/08/29 jQuery
vue自定义tap指令及tap事件的实现
2018/09/18 Javascript
webpack 从指定入口文件中提取公共文件的方法
2018/11/13 Javascript
javascript json字符串到json对象转义问题
2019/01/22 Javascript
JS实现获取当前所在周的周六、周日示例分析
2019/05/11 Javascript
js对象数组和对象的使用实例详解
2019/08/27 Javascript
js实现鼠标拖曳效果
2020/12/30 Javascript
详解ES6 中的Object.assign()的用法实例代码
2021/01/11 Javascript
[03:04]DOTA2英雄基础教程 影魔
2013/12/11 DOTA
[02:49]DAC2018决赛日TOP5 LGD开启黑暗之门绝杀VP
2018/04/08 DOTA
python搭建简易服务器分析与实现
2012/12/15 Python
Python实现屏幕截图的两种方式
2018/02/05 Python
python针对excel的操作技巧
2018/03/13 Python
python清除字符串中间空格的实例讲解
2018/05/11 Python
django认证系统 Authentication使用详解
2019/07/22 Python
python对数组进行排序,并输出排序后对应的索引值方式
2020/02/28 Python
python中shell执行知识点
2020/05/06 Python
python中turtle库的简单使用教程
2020/11/11 Python
CSS实现鼠标滑过鼠标点击代码写法
2016/12/26 HTML / CSS
Carolina工作鞋官网:Carolina Footwear
2019/03/14 全球购物
怎样让char类型的东西转换成int类型
2013/12/09 面试题
新闻系毕业生推荐信
2013/11/16 职场文书
学习党课思想汇报
2013/12/29 职场文书
运动会广播稿200米
2014/01/27 职场文书
MySQL连表查询分组去重的实现示例
2021/07/01 MySQL