小程序视频列表播放与暂停-小程序实现视频播放-视频播放小程序-即速应用

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

浏览量：1567 时间：2020-04-06 来源：_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:''})}})