vue 使用vue-video-player加载视频(铺满容器)
npm install vue-video-player --save
import VideoPlayer from "vue-video-player"
import "video.js/dist/video-js.css"
import "vue-video-player/src/custom-theme.css"
import "videojs-flash"
Vue.use(VideoPlayer)
<div
class="spItemBox"
v-for="(item, i) in videoList"
:key="i"
>
<video-player
style="width: 100%; height: 100%; object-fit: fill"
class="video-player vjs-custom-skin"
ref="videoPlayer"
:playsinline="true"
:options="playerOptions[i]"
></video-player>
</div>
export default {
data() {
return {
playerOptions: [],
videoList: [{}, {}, {}, {}],
};
},
mounted() {
for (let index = 0; index < 4; index++) {
let url = require("../../../../../assets/videos/video1.mp4");
const obj = {
autoplay: false,
muted: true,
loop: true,
preload: "auto",
language: "zh-CN",
aspectRatio: "14:6",
fluid: true,
sources: [
{
type: "video/mp4",
src: url,
},
],
poster: "",
notSupportedMessage: "此视频暂无法播放,请稍后再试",
controlBar: {
timeDivider: false,
durationDisplay: false,
remainingTimeDisplay: false,
fullscreenToggle: false,
},
};
this.playerOptions.push(obj);
}
},
};
/deep/ .video-js {
height: 100%;
}
/deep/ .video-js .vjs-tech {
object-fit: fill;
}
/deep/ .vjs-poster {
background-size: cover;
}