能力固然重要，但并不能代表全部；
实现的功能样子是这个样子的,全部代码已经贴过来 项目在我的 github上
地址李大玄https://github.com/lidaxuan/-WechartVideoPlayList
在这里插入图片描述
html
<!--pages/courseVideo/courseVideo.wxml-->
<text>pages/courseVideo/courseVideo.wxml</text>
<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 有问题的话可以找我一同探讨
