本文共 1774 字，大约阅读时间需要 5 分钟。
通过列表的点击事件自动播放列表对应的视频，同时停止上一个视频的播放。
源码：
{
{item.title}}敬请期待
CSS:
/* 边框 */
.vv {
width: 700rpx;
height: 530rpx;
border-left: gainsboro 1px solid;
border-right: gainsboro 1px solid;
border-top: gainsboro 1px solid;
margin-bottom: 80rpx;
border-radius: 15rpx;
overflow: hidden;
position: relative;
top: 40rpx;
left: 20rpx;
}
/* 小图标 */
.img1 {
width: 36rpx;
height: 28rpx;
margin-top: 30rpx;
}
/* 标题文字 */
.text {
font-size: 28rpx;
color: #585858;
margin-left: 10rpx;
}
/* 视频 */
.video {
width: 100%;
height: 450rpx;
margin-top: 20rpx;
border-bottom-left-radius: 15rpx;
border-bottom-right-radius: 15rpx;
}
.videoVideo2 {
width: 703rpx;
height: 453rpx;
position: absolute;
top: 80rpx;
left: 20rpx;
z-index: 99;
}
.videoPlay{
position: absolute;
width: 80rpx;
height: 80rpx;
top:45%;
left: 45%;
margin: -30rpx 0 0 -30rpx;
z-index: 100;
}
/* 底部盒子 */
.bottom {
width: 40rpx;
height: 40rpx;
}
/* 底部图片 */
.di {
display: flex;
flex-direction: row;
padding: 60rpx 0rpx 100rpx 280rpx;
}
/* 底部文字 */
.bottom_text {
font-size: 34rpx;
color: #d8d8d8;
margin-left: 10rpx;
}
JS:
// pages/class/class.js
Page({
/**
* 页面的初始数据
*/
data: {
videoPlay: null,
vedio_data: [{
title: '无13131(大班)',
url: 'xxx',
img: 'xxx',
},
{
title: ' 如何23 1 、 2 、2423、4)',
url: 'xxx',
img: 'xxx'
},
{
title: '温热碍',
url: 'xxx',
img:'xxx'
},
{
title: '挑嘎嘎嘎输',
url: 'xxx',
img: 'xxx'
},
{
title: '延伸挑战：运输圆球',
url: 'xxx',
img:'xxx'
},
]
},
// 点击cover播放，其它视频结束
videoPlay: function (e) {
var _index = e.currentTarget.id
this.setData({
_index: _index
})
//停止正在播放的视频
var videoContextPrev = wx.createVideoContext(this.data._index)
videoContextPrev.stop();
setTimeout(function(){
//将点击视频进行播放
var videoContext = wx.createVideoContext(_index)
videoContext.play();
},500)
},
})
视频和图片地址就不提供了。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
转载地址：https://blog.csdn.net/weixin_32042443/article/details/117311339 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！
发表评论
最新留言
关于作者
