let video = uni.createVideoContext("video"+index, this) 核心代码
video.play();
1、inde.vue 代码
<template>
<view class="content">
<Videobox :video="video"></Videobox>
</view>
</template>
<script>
import Videobox from '@/components/video/index.vue'
export default {
components:{ Videobox },
data() {
return {
video:[{
url:'https://www.w3school.com.cn/i/movie.mp4',
},
{
url:'https://www.w3school.com.cn/i/movie.mp4',
},
{
url:'https://www.w3school.com.cn/i/movie.mp4',
}
]
}
},
onLoad() {
},
methods: {
}
}
</script>
<style lang="scss" scoped>
</style>
2、组件代码 components/video/index.vue
<template>
<view>
<view class="video-box" v-for="(item,index) in video" :key="index">
<video class="video" :id="'video'+index" @play="videoPlay(index)" :src="item.url" controls object-fit="cover"></video>
</view>
</view>
</template>
<script>
export default{
name:"Videobox",
props:{
"video":{ type:Array },
},
data(){
return{
}
},
onShow(){
},
methods:{
videoPlay(index){
let video = uni.createVideoContext("video"+index, this)
video.play();
for(var i = 0; i< this.video.length; i++){
if(i!=index){
let video2 = uni.createVideoContext("video"+i,this);
video2.pause();
}
}
}
}
}
</script>
<style lang="scss" scoped>
image{width:100%; height:100%;}
.video-box{ height: 400rpx; position: relative; margin-bottom:20rpx;
.video{width: 100%;height: 100%;}
}
</style>
