微信小程序 视频列表播放 当前播放其他暂停

能力固然重要，但并不能代表全部；

实现的功能样子是这个样子的,全部代码已经贴过来 项目在我的 github上
地址李大玄https://github.com/lidaxuan/-WechartVideoPlayList

html

<text>pages/courseVideo/courseVideo.wxmltext>
<view class="container">
    
    <scroll-view class='nav-page'>
        <view class="item-box " wx:for="{{dataList}}" wx:key="item">
            
            <view class="video-title-box">
                <view class='video-title'>{{item.title}}view>
            view>

            
            <view data-id="{{index}}" class="video-image-box" style="display: {{ _index == index ? 'none' : 'block' }};" bindtap="videoPlay">
                <view class="video-cover-box">
                    <image class="video-image" src="{{item.cover}}" mode="aspectFit">
                    image>
                view>
                
                <image class="video-image-play" src="/img/Group.png" mode="scaleToFill">image>

            view>

            
            <video src="{{item.content}}" data-id="{{index}}" class='video' wx:if="{{_index == index}}" objectFit='contain' autoplay='true' controls>video>

        view>
    scroll-view>

view>

js

Page({
    data: {
        videoPlay: null,
        dataList: [],
    },
    onLoad: function () {
        this.getData();
        wx.hideShareMenu();
    },
    // 点击cover播放，其它视频结束
    videoPlay: function (e) {
        var _index = e.currentTarget.dataset.id
        this.setData({
            _index: _index
        })
        //停止正在播放的视频
        var videoContextPrev = wx.createVideoContext(_index + "")
        videoContextPrev.stop();

        setTimeout(function () {
            //将点击视频进行播放
            var videoContext = wx.createVideoContext(_index + "")
            videoContext.play();
        }, 500)
    },
    // 模拟数据加载
    getData: function () {
        this.setData({
            dataList: [
                { "id": 6193654, "title": "东西不是随便捡的???", "content": "http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400", "cover": "http://pic.rmb.bdstatic.com/mvideo/cde67c41211d7a46c1fb87138935b912" },
                { "id": 6193715, "title": "女儿让这位站着睡觉的叔叔坐下来，他却说他裤子脏", "content": "http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400/90ffc39a988814ee6ddb563bd65627cd.jpg" },
                { "id": 6193729, "title": "大师画的栩栩如生，长见识了……", "content": "http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400", "cover": "http://pic.rmb.bdstatic.com/mvideo/175dcae5e199448798aff444b8b672f4" },
                { "id": 6193504, "title": "高手啊。居然能听出来反了。??", "content": "http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400", "cover": "http://pic.rmb.bdstatic.com/mvideo/caf3df828a3d03c49c28e27f79c93416" },
                { "id": 6193932, "title": "就算你是开宝马的，当你回到父母身边，你照样要义无反顾解决他们的问题?", "content": "http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400", "cover": "http://pic.rmb.bdstatic.com/mvideo/891bdb85cfa665e8689462971c5a89e3" },
                { "id": 6193576, "title": "到底谁模仿的谁", "content": "https://vd4.bdstatic.com/mda-ik7jyzzq1vvjfqjr/mda-ik7jyzzq1vvjfqjr.mp4", "cover": "http://pic.rmb.bdstatic.com/mvideo/486fc076283e9aa0234ea056f6e8721d.jpg" }, { "id": 6193803, "title": "这样是不是可以证明平行四边形与三角形的面积相等？？？", "content": "http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400", "cover": "http://pic.rmb.bdstatic.com/mvideo/1b0095e399038fccc650877bfc7d9297.jpg" },
                { "id": 6193883, "title": "隐形门！???", "content": "https://vd3.bdstatic.com/mda-ik6254k2dwqi75zr/mda-ik6254k2dwqi75zr.mp4", "cover": "http://pic.rmb.bdstatic.com/mvideo/70a0790d49998653eb2deb1cadfbdf93" }, { "id": 6193586, "title": "奶奶年轻时没有穿过高跟鞋。爷爷用竹子给他做了一双高跟鞋。", "content": "http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400", "cover": "http://pic.rmb.bdstatic.com/mvideo/d6bc26f7a6af464a270c78567cefb14d.jpg" },
                { "id": 6193639, "title": "周冬雨的弟弟周冬瓜 妹妹周东西", "content": "https://vd4.bdstatic.com/mda-ijwedhfai80dc5qu/mda-ijwedhfai80dc5qu.mp4", "cover": "http://pic.rmb.bdstatic.com/mvideo/a3058df458032c4da9d775f6fea5b9ef" },
            ]
        });

    }
})

css

/* pages/courseVideo/courseVideo.wxss */

.item-box .video-title-box {
    width: 100%;
    margin-bottom: 20rpx;
}

.item-box .video-title-box .video-title {
    width: 100%;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
}

.item-box .video-image-box {
    height: 400rpx;
    width: 100%;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position-x: 30rpx;
    position: relative;
}

.video-cover-box {
    height: 100%;
    width: 100%;
    background: #000;
    text-align: center;
}

.item-box .video-image-box .video-cover-box .video-image {
    height: 100%;
    width: 100%;
}

.item-box .video {
    height: 400rpx;
    width: 100%;
    margin: 0 30rpx 0 0;
    position: relative;
}

.item-box .video-image-box .video-image-play {
    position: absolute;
    width: 80rpx;
    height: 80rpx;
    top: calc(50% - 40rpx);
    left: calc(50% - 40rpx);
    z-index: 100;
}

在最后附上我的QQ: 2489757828 有问题的话可以找我一同探讨

我的私人博客: 李大玄
我的简书: 李大玄