-----html部分------ <swiper vertical :style="{height: windowheight+'px',width:375+'px'}" class="swiper-top" @change="playNow"> <swiper-item v-for="(item1,index1) in ['1','2','3']" :key ="index1"> <view :style="{height: windowheight+'px',width:375+'px'}" @click="controlVideo"> <template > <video :id="`postDetail${index1}`" :ref="`postDetail${index1}`" :enable-play-gesture="true" :src="postDetail.video_url" :show-fullscreen-btn="false" object-fit="contain" play-btn-position="center" :style="{height: windowheight+'px',width:375+'px'}"></video > </template> </view> </swiper-item> </swiper>
-------------
<script>
export default {
data() {
return {
videoPlay:true,
current:0,//滑塊第幾個
videoContext:undefined //全局定義視頻API變量
}
},
this.playNow(1);//把這個放到初始化頁面的函數內，即可進入頁面自動播放，不放就不會自動播放
methods: {
async playNow(e){
if(e.detail!=undefined){
this.current=e.detail.current;
this.videoContext.pause()
this.videoContext.seek(0)
this.$off(this.videoContext);
}
this.videoContext = await uni.createVideoContext(`postDetail${this.current}`)
this.videoContext.play();
this.videoPlay=true;
},
controlVideo(){ //多寫的一個單擊蒙版控制播放暫停，也可以寫在playNow內，傳不同的值來控制就行
if(this.videoPlay){
this.videoContext.pause() //暫停
this.videoContext.seek(0) //復原播放時間到0秒
this.videoPlay=false;
}else{
this.videoContext.play() //播放
this.videoPlay=true;
}
},
}
}
</script>
主要是針對uniapp的video組件的靈活使用；