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


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 相关文章推荐
JS 参数传递的实际应用代码分析
Sep 13 Javascript
javascript对象的使用和属性操作示例详解
Mar 02 Javascript
JavaScript设计模式之建造者模式介绍
Dec 28 Javascript
JavaScript数据结构和算法之二叉树详解
Feb 11 Javascript
简单实现轮播图效果的实例
Jul 15 Javascript
AngularJS表单详解及示例代码
Aug 17 Javascript
JS 实现 ajax 异步浏览器兼容问题
Jan 21 Javascript
利用Angular+Angular-Ui实现分页(代码加简单)
Mar 10 Javascript
Vue+ElementUI项目使用webpack输出MPA的方法
Aug 27 Javascript
JS实现简单随机3D骰子
Oct 24 Javascript
vue全局使用axios的操作
Sep 08 Javascript
Javascript设计模式之原型模式详细
Oct 05 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
PHP 图片上传实现代码 带详细注释
2010/04/29 PHP
如何解决CI框架的Disallowed Key Characters错误提示
2013/07/05 PHP
常见的四种POST 提交数据方式(小总结)
2015/10/08 PHP
PHP获取文件扩展名的4种方法
2015/11/24 PHP
PHP递归遍历多维数组实现无限分类的方法
2016/05/06 PHP
PHP 无限级分类
2017/05/04 PHP
Laravel中如何增加自定义全局函数详解
2017/05/09 PHP
PHP高精确度运算BC函数库实例详解
2017/08/15 PHP
gearman中任务的优先级和返回状态实例分析
2020/02/27 PHP
TNC vs IO BO3 第一场2.13
2021/03/10 DOTA
javascript 页面划词搜索JS
2009/09/28 Javascript
简约JS日历控件 实例代码
2013/07/12 Javascript
使用jQuery仿苹果官网焦点图特效
2014/12/23 Javascript
在AngularJS中使用AJAX的方法
2015/06/17 Javascript
Jquery跨浏览器文本复制插件Zero Clipboard的使用方法
2016/02/28 Javascript
Highcharts+NodeJS搭建数据可视化平台示例
2017/01/01 NodeJs
EL表达式截取字符串的函数说明
2017/09/22 Javascript
p5.js绘制旋转的正方形
2019/10/23 Javascript
解决vue动态路由异步加载import组件,加载不到module的问题
2020/07/26 Javascript
微信小程序实现倒计时功能
2020/11/19 Javascript
Python中除法使用的注意事项
2014/08/21 Python
python 调用c语言函数的方法
2017/09/29 Python
python实现学生管理系统
2018/01/11 Python
Python在for循环中更改list值的方法【推荐】
2018/08/17 Python
Python类的继承、多态及获取对象信息操作详解
2019/02/28 Python
详解Python函数式编程—高阶函数
2019/03/29 Python
python+selenium 脚本实现每天自动登记的思路详解
2020/03/11 Python
python 图像判断,清晰度(明暗),彩色与黑白实例
2020/06/04 Python
玩具反斗城美国官网:Toys"R"Us
2016/09/17 全球购物
社团活动策划书范文
2014/01/09 职场文书
我爱读书演讲稿
2014/05/07 职场文书
2014年酒店前台工作总结
2014/11/14 职场文书
学雷锋团日活动总结
2015/05/06 职场文书
一文帮你理解PReact10.5.13源码
2021/04/03 Javascript
解析MySQL binlog
2021/06/11 MySQL
Python实现排序方法常见的四种
2021/07/15 Python