同一个页面多视频播放
发布于 2 年前 作者 osu 1300 次浏览 来自 分享

wxml:

<view class="pos">

                <video bindpause="playpausebindended="playenddata-index="{{index}}" class="myVideo {{item.isPlay ? '' : 'hide'}}" src="{{item.urlPreview}}" id="myVideo{{index}}" style="width:{{item.width}}rpx;height:{{item.height}}rpx"></video>

                <view bindtap="videoPlaydata-index='{{index}}' wx:if="{{!item.isPlay}}">

                    <image src="{{item.thumbnailPreview}}" class="imgBoxstyle="width:{{item.width}}rpx;height:{{item.height}}rpx"></image>

                    <image class="videosrc="/images/video.png"></image>

                </view>

            </view


css:

.myVideo {

    width: 100%;

    display: block;

    margin: 0;

    padding: 0;

    margin: 0 auto;

    margin-top: 20rpx;

}


.video {

    width: 60rpx;

    height: 60rpx;

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

}

 .pos {

     position: relative;

 }

 .hide {

     display: none !important;

 }

.imgBox {

    display: block;

    margin: 0;

    padding: 0;

    margin: 0 auto;

    margin-top: 20rpx;

}

JS:

Page({


    /**

     * 页面的初始数据

     */

    data: {

        list: [{

isPlay:false,//是否播放

thumbnailPreview:"",//视频封面

urlPreview:"",//视频地址

width:"750",//视频宽度

height:"300",//视频高度

}],

    },


//多个视频文件只能播放一个视频,其他视频暂停,点击当前暂停当前

        async videoPlay(event) {

            var curIdx = event.currentTarget.dataset.index;

            let det = this.data.list;

            this.pp(det, curIdx)

        },

        pp(det, curIdx) {

            // 有播放时先将prev暂停,再播放当前点击的current

            if (this.data.indexCurrent != null{

                var videoContextPrev = wx.createVideoContext('myVideo' + this.data.indexCurrent, this)

                if (this.data.indexCurrent != curIdx{

                    det[this.data.indexCurrent].isPlay = false;

                    det.splice(this.data.indexCurrent, 1, det[this.data.indexCurrent])

                    videoContextPrev.stop();

                }

                det[curIdx].isPlay = true;

                det.splice(curIdx, 1, det[curIdx])

                this.setData({

                    indexCurrent: curIdx,

                    list: det

                })

                var videoContextCurrent = wx.createVideoContext('myVideo' + curIdx, this)

                videoContextCurrent.play()

            } else { // 没有播放时播放视频

                det[curIdx].isPlay = true;

                det.splice(curIdx, 1, det[curIdx])

                this.setData({

                    indexCurrent: curIdx,

                    list: det

                })

                var videoContext = wx.createVideoContext('myVideo' + curIdx, this//这里对应的视频id

                videoContext.play()

            }

        },

        //播放暂停

        playpause(event) {

            var curIdx = event.currentTarget.dataset.index;

            let det = this.data.list;

            det[curIdx].isPlay = false;

            det.splice(curIdx, 1, det[curIdx])

            this.setData({

                list: det

            })

        },

        //播放结束

        playend(event) {

            var curIdx = event.currentTarget.dataset.index;

            let det = this.data.list;

            det[curIdx].isPlay = false;

            det.splice(curIdx, 1, det[curIdx])

            this.setData({

                list: det

            })

        },

})


回到顶部