<template>
<div id="video-play">
<Row>
<Col v-for="(item,i) in listArray" :span="item.span">
<div style="text-align:center;border:1px solid #ece9e9">
<video
:ref="item.srcTitle"
:id="item.srcTitle"
:style="{width:`${item.width-60}px`,height:`${item.height}px`}"
class="video-js vjs-default-skin"
muted
preload="auto"
>
<source :src="item.src" type="application/x-mpegURL" />
</video>
</div>
</Col>
</Row>
</div>
</template>
<script>
import videojs from 'video.js'
import 'videojs-contrib-hls'
export default {
props: {
listArray: {
type: Array,
default () {
return [];
}
}
},
data () {
return {
data: []
}
},
watch: {
listArray () {
setTimeout(() => {
this.listArray.forEach(element => {
if (element.srcTitle != '') {
let myPlayer = videojs(element.srcTitle)
videojs(element.srcTitle).ready(function () {
let myPlayer = this;
myPlayer.play();
});
}
})
}, 2500);
}
},
mounted () {
},
methods: {
}
}
</script>
<style lang="less">
#video-play {
.video-js {
/* 设置背景颜色 */
background-color: white !important;
}
/* 设置视频填充 */
video {
object-fit: fill !important;
}
}
</style>
效果图如下
