演示
需求?
一個(gè)頁面同時(shí)有很多視頻播放，當(dāng)用戶點(diǎn)擊一個(gè)視頻后，開始播放視頻，當(dāng)點(diǎn)擊另一個(gè)視頻后，暫停前一個(gè)播放視頻，讓當(dāng)前頁面只有一個(gè)視頻處于播放狀態(tài)
原理文章來源：http://www.zghlxwxcb.cn/news/detail-763994.html
播放視頻時(shí)，先判斷當(dāng)前是否有視頻正在播放，如果沒有，則播放，如果有，則暫停其他視頻，再播放當(dāng)前視頻?文章來源地址http://www.zghlxwxcb.cn/news/detail-763994.html
?源碼
wxml
<view wx:for="{{videos}}" class="recordItem_hot" wx:key="{{index}}" data-item='{{item}}'>
<video class="cover_img" src="{{item.url}}" objectFit="cover" show-fullscreen-btn id="video{{index}}" bindtap="video_play" />
<view class="hot_name">
<view class="name_view">{{item.title}}</view>
</view>
</view>js?
Page({
/**
* 頁面的初始數(shù)據(jù)
*/
data: {
videos:[
{
url:'https://scenicpicture.umituo.com/upload/video/0387064bad8464868ae292c8cb793f86.mp4',
title:'視頻一'
},
{
url:'https://scenicpicture.umituo.com/upload/video/ec341fa007ce6943ed997f5b079ea44b.mp4',
title:'視頻二'
},
{
url:'https://scenicpicture.umituo.com/upload/video/mmexport1645779520102.mp4',
title:'視頻三'
},
],
indexCurrent: null,
},
video_play(e) {
let curIdx = e.currentTarget.id;
// 沒有播放時(shí)播放視頻
// console.log(curIdx)
if (!this.data.indexCurrent) {
this.setData({
indexCurrent: curIdx
})
let videoContext = wx.createVideoContext(curIdx,this) //這里對(duì)應(yīng)的視頻id
videoContext.play()
} else { // 有播放時(shí)先將prev暫停，再播放當(dāng)前點(diǎn)擊的current
let videoContextPrev = wx.createVideoContext(this.data.indexCurrent,this)//this是在自定義組件下，當(dāng)前組件實(shí)例的this，以操作組件內(nèi) video 組件（在自定義組件中藥加上this，如果是普通頁面即不需要加）
if (this.data.indexCurrent != curIdx) {
console.log(123)
videoContextPrev.pause()
this.setData({
indexCurrent: curIdx
})
let videoContextCurrent = wx.createVideoContext(curIdx,this)
videoContextCurrent.play()
}
}
},
})到了這里，關(guān)于微信小程序video標(biāo)簽如何在其他視頻播放時(shí)讓另一個(gè)視頻暫停播放-demo的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
