微客导航 » 文章资讯 » 小程序点击图片实现自动播放视频

小程序点击图片实现自动播放视频

2023-09-05 07:00:04 270

通过列表的点击事件自动播放列表对应的视频，同时停止上一个视频的播放。

源码：





{{item.title}}















敬请期待

CSS:

/*边框*/
.vv{
width:700rpx;
height:530rpx;
border-left:gainsboro1pxsolid;
border-right:gainsboro1pxsolid;
border-top:gainsboro1pxsolid;
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:-30rpx00-30rpx;
z-index:100;
}

/*底部盒子*/
.bottom{
width:40rpx;
height:40rpx;
}

/*底部图片*/
.di{
display:flex;
flex-direction:row;
padding:60rpx0rpx100rpx280rpx;
}

/*底部文字*/
.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:'如何231、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
})
//停止正在播放的视频
varvideoContextPrev=wx.createVideoContext(this.data._index)
videoContextPrev.stop();

setTimeout(function(){
//将点击视频进行播放
varvideoContext=wx.createVideoContext(_index)
videoContext.play();
},500)
},
})

视频和图片地址就不提供了。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
3162201930
czq8825@qq.com

小程序点击图片实现自动播放视频

热门推荐

随机推荐