這篇文章主要講解了小程序點(diǎn)擊圖片實(shí)現(xiàn)自動(dòng)播放視頻的代碼詳解，內(nèi)容清晰明了，對(duì)此有興趣的小伙伴可以學(xué)習(xí)一下，相信大家閱讀完之后會(huì)有幫助。
創(chuàng)新互聯(lián)是一家集網(wǎng)站建設(shè),岑溪企業(yè)網(wǎng)站建設(shè),岑溪品牌網(wǎng)站建設(shè),網(wǎng)站定制,岑溪網(wǎng)站建設(shè)報(bào)價(jià),網(wǎng)絡(luò)營(yíng)銷,網(wǎng)絡(luò)優(yōu)化,岑溪網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強(qiáng)企業(yè)競(jìng)爭(zhēng)力。可充分滿足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時(shí)我們時(shí)刻保持專業(yè)、時(shí)尚、前沿，時(shí)刻以成就客戶成長(zhǎng)自我，堅(jiān)持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實(shí)用型網(wǎng)站。
通過列表的點(diǎn)擊事件自動(dòng)播放列表對(duì)應(yīng)的視頻，同時(shí)停止上一個(gè)視頻的播放。
源碼：
{{item.title}} 敬請(qǐng)期待
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;
}
/* 小圖標(biāo) */
.img1 {
width: 36rpx;
height: 28rpx;
margin-top: 30rpx;
}
/* 標(biāo)題文字 */
.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({
/**
* 頁(yè)面的初始數(shù)據(jù)
*/
data: {
videoPlay: null,
vedio_data: [{
title: '無13131（大班）',
url: 'xxx',
img: 'xxx',
},
{
title: ' 如何23 1 、 2 、2423、4）',
url: 'xxx',
img: 'xxx'
},
{
title: '溫?zé)岬K',
url: 'xxx',
img:'xxx'
},
{
title: '挑嘎嘎嘎輸',
url: 'xxx',
img: 'xxx'
},
{
title: '延伸挑戰(zhàn)：運(yùn)輸圓球',
url: 'xxx',
img:'xxx'
},
]
},
// 點(diǎn)擊cover播放，其它視頻結(jié)束
videoPlay: function (e) {
var _index = e.currentTarget.id
this.setData({
_index: _index
})
//停止正在播放的視頻
var videoContextPrev = wx.createVideoContext(this.data._index)
videoContextPrev.stop();
setTimeout(function(){
//將點(diǎn)擊視頻進(jìn)行播放
var videoContext = wx.createVideoContext(_index)
videoContext.play();
},500)
},
})看完上述內(nèi)容，是不是對(duì)小程序點(diǎn)擊圖片實(shí)現(xiàn)自動(dòng)播放視頻的代碼詳解有進(jìn)一步的了解，如果還想學(xué)習(xí)更多內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
