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

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

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



// js
Page({
    
    data:{
        videoindex:'',
        isFull:false
    },
    //点击播放
    bindplay:function(e){
        var id=e.currentTarget.dataset.pid,
            videoindex=e.currentTarget.dataset.index;
        var videoCtx=wx.createVideoContext(id);    //获取点击的视频
        if(!this.data.videoindex){    //没有其他视频播放时
            this.setData({
                videoindex:videoindex
            },function(){
                videoCtx.play();
            })
        }else{    // 有其他视频正在播放
            var videoCtxPrev=wx.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(){
        var video=wx.createVideoContext('myVideo' + this.data.videoindex);
        if(this.data.isFull){    //处于全屏则退出
          video.exitFullScreen()
        } 
        this.setData({
            videoindex:''
        })
    }

})

 

你可能感兴趣的:(小程序)