建站
咨询
售后
建站咨询
小程序点击图片实现自动播放视频的代码详解
这篇文章主要讲解了小程序点击图片实现自动播放视频的代码详解，内容清晰明了，对此有兴趣的小伙伴可以学习一下，相信大家阅读完之后会有帮助。
创新互联是一家集网站建设,岑溪企业网站建设,岑溪品牌网站建设,网站定制,岑溪网站建设报价,网络营销,网络优化,岑溪网站推广为一体的创新建站企业，帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿，时刻以成就客户成长自我，坚持不断学习、思考、沉淀、净化自己，让我们为更多的企业打造出实用型网站。
通过列表的点击事件自动播放列表对应的视频，同时停止上一个视频的播放。
源码：
{{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)
},
})看完上述内容，是不是对小程序点击图片实现自动播放视频的代码详解有进一步的了解，如果还想学习更多内容，欢迎关注创新互联行业资讯频道。
分享名称：小程序点击图片实现自动播放视频的代码详解
当前路径：http://scgulin.cn/article/iisgcg.html
