<template>
<view class="video-content">
<view class="main" v-for="item in videoList" :key="item.id">
<view class="video-box">
<video :data-id="item.id" :key="item.id" :id="'video'+item.id" class="video" title="产品介绍" :src="item.videoUrl"
controls show-mute-btn :poster="item.coverUrl"
@play="playVideo"
@error="videoErrorCallback"
>
</video>
</view>
</view>
</view>
</template>
<script>
import {videoList} from './videoList.js'
export default {
data() {
return {
videoList:videoList
}
},
onReady() {
this.videoContext = uni.createVideoContext('myVideo',this)
},
methods: {
navToBack(){
this.$api.backPage()
},
playVideo(e){
let _this = this;
let currentId = 'video' + e.currentTarget.dataset.id;
this.videoContent = uni.createVideoContext(currentId,_this).play();
let trailer = this.videoList;
trailer.forEach((item, index) =>{
if (item.videoUrl != null && item.videoUrl != "") {
let temp = 'video' + item.id;
if (temp != currentId) {
uni.createVideoContext(temp,_this).pause();
}
}
})
},
videoErrorCallback(e) {
},
}
}
</script>
关键代码
playVideo(e){
let _this = this;
let currentId = 'video' + e.currentTarget.dataset.id;
this.videoContent = uni.createVideoContext(currentId,_this).play();
let trailer = this.videoList;
trailer.forEach((item, index) =>{
if (item.videoUrl != null && item.videoUrl != "") {
let temp = 'video' + item.id;
if (temp != currentId) {
uni.createVideoContext(temp,_this).pause();
}
}
})
},