微信小程序> 小程序视频列表播放与暂停-小程序实现视频播放-视频播放小程序

小程序视频列表播放与暂停-小程序实现视频播放-视频播放小程序

浏览量:1567 时间: 来源:_Jester
1.

实现:点击视频获取该视频id,通过wx.createVideoContext创建video上下文videoContext对象。当前没有视频播放时,获取当前视频,play()方法进行播放;有视频播放时,pause()暂停正在播放的视频,play()播放点击的视频。

2.

因为安卓机出现视频黑屏的问题,所以使用cover-view给视频加了一个播放按钮,视频封面通过后台给的图片给到poster显示

!--wxml--videosrc'{{item.video}}'id'myVideo{{item.id}}'poster'{{item.video_img}}'controls'{{true}}'show-center-play-btn'{{false}}'bindended'videoEnd'bindfullscreenchange'videoFull'cover-viewstyle"display:{{item.idvideoindex?'block':'none'}}"cover-imagesrc'/images/play.png'bindtap'bindplay'data-pid'myVideo{{item.id}}'data-index'{{item.id}}'/cover-image/cover-view/video//jsPage({data:{videoindex:'',isFull:false},//点击播放bindplay:function(e){varide.currentTarget.dataset.pid,videoindexe.currentTarget.dataset.index;varvideoCtxwx.createVideoContext(id);//获取点击的视频if(!this.data.videoindex){//没有其他视频播放时this.setData({videoindex:videoindex},function(){videoCtx.play();})}else{//有其他视频正在播放varvideoCtxPrevwx.createVideoContext('myVideo'+this.data.videoindex);//找到当前正在播放的视频videoCtxPrev.pause();//暂停this.setData({videoindex:videoindex},function(){videoCtx.play();//播放点击的视频})}},//判断是否在全屏状态videoFull:function(e){if(e.detail.fullScreen){this.setData({isFull:true})}else{this.setData({isFull:false})}}//视频播放完毕videoEnd:function(){varvideowx.createVideoContext('myVideo'+this.data.videoindex);if(this.data.isFull){//处于全屏则退出video.exitFullScreen()}this.setData({videoindex:''})}})

版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

产品经理

手机 : 13312967497

擅长 : 小程序流量变现

扫码领取礼包

最新资讯

热门模板

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎