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


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 相关文章推荐
JavaScript Eval 函数使用
Mar 23 Javascript
javascript数组去掉重复
May 12 Javascript
基于JavaScript实现继承机制之构造函数方法对象冒充的使用详解
May 07 Javascript
经过绑定元素时会多次触发mouseover和mouseout事件
Feb 28 Javascript
jQuery常用数据处理方法小结
Feb 20 Javascript
jQuery支持动态参数将函数绑定到事件上的方法
Mar 17 Javascript
自己动手写的javascript前端等待控件
Oct 30 Javascript
jquery实现全选和全不选功能效果的实现代码【推荐】
May 05 Javascript
利用Jquery队列实现根据输入数量显示的动画
Sep 01 Javascript
javaScript中封装的各种写法示例(推荐)
Jul 03 Javascript
js实现简单数字变动效果
Nov 06 Javascript
js实现飞机大战游戏
Aug 26 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
星际争霸兵种名称对照表
2020/03/04 星际争霸
WAR3重制版DOTA 5V5初体验
2020/04/09 DOTA
main.php
2006/12/09 PHP
PHP array操作10个小技巧分享
2011/06/23 PHP
深入浅析用PHP实现MVC
2016/03/02 PHP
php实现背景图上添加圆形logo图标的方法
2016/11/17 PHP
PHP使用Nginx实现反向代理
2017/09/20 PHP
HTML Dom与Css控制方法
2010/10/25 Javascript
使用CSS和jQuery模拟select并附提交后取得数据的代码
2013/10/18 Javascript
在jquery中combobox多选的不兼容问题总结
2013/12/24 Javascript
js使用eval解析json实例与注意事项分享
2014/01/18 Javascript
Iframe 自动适应页面的高度示例代码
2014/02/26 Javascript
iframe窗口高度自适应的又一个巧妙实现思路
2014/04/04 Javascript
SWFObject基本用法实例分析
2015/07/20 Javascript
IScroll5 中文API参数说明和调用方法
2016/05/21 Javascript
JavaScript仿flash遮罩动画效果
2016/06/15 Javascript
AngularJS学习第一篇 AngularJS基础知识
2017/02/13 Javascript
AngularJs分页插件使用详解
2018/06/30 Javascript
详解浏览器缓存和webpack缓存配置
2018/07/06 Javascript
node(koa2) web应用模块介绍详解
2019/03/29 Javascript
Vue v-text指令简单使用方法示例
2019/09/19 Javascript
Vue 解决多级动态面包屑导航的问题
2019/11/04 Javascript
如何通过vscode运行调试javascript代码
2020/07/24 Javascript
浅谈vue生命周期共有几个阶段?分别是什么?
2020/08/07 Javascript
vue下载二进制流图片操作
2020/10/26 Javascript
使用Typescript开发微信小程序的步骤详解
2021/01/12 Javascript
[05:31]DOTA2上海特级锦标赛主赛事第三日RECAP
2016/03/05 DOTA
Python的SQLAlchemy框架使用入门
2015/04/29 Python
在DigitalOcean的服务器上部署flaskblog应用
2015/12/19 Python
Python常见字典内建函数用法示例
2018/05/14 Python
Python使用jsonpath-rw模块处理Json对象操作示例
2018/07/31 Python
django从后台返回html代码的实例
2020/03/11 Python
英国莱斯特松木橡木家具网上商店:Choice Furniture Superstore
2019/07/05 全球购物
开业庆典主持词
2014/03/21 职场文书
教师年终个人总结
2015/02/11 职场文书
稽核岗位职责范本
2015/04/13 职场文书