引入挂载
import VideoPlayer from "vue-video-player";
require("video.js/dist/video-js.css");
require("vue-video-player/src/custom-theme.css");
Vue.use(VideoPlayer);
封装video组件
1. html部分
<template>
<!--在视频外面加一个容器-->
<div class="input_video">
<video-player
class="video-player vjs-custom-skin"
ref="videoPlayer"
:playsinline="true"
:options="playerOptions"
@play="onPlayerPlay($event)"
></video-player>
<button @click="paly">开始</button>
<button @click="pluse">暂停</button>
</div>
</template>
2. script 部分
<script>
export default {
name: "BusImg",
data() {
return {
playerOptions: {
playbackRates: [0.5, 1.0, 1.5],
autoplay: true,
muted: false,
loop: true,
preload: "auto",
language: "zh-CN",
aspectRatio: "16:9",
fluid: true,
sources: [
{
type: "video/mp4",
src:
"https://assets.mixkit.co/videos/preview/mixkit-daytime-city-traffic-aerial-view-56-large.mp4"
}
],
poster: "",
notSupportedMessage: "此视频暂无法播放,请稍后再试",
controlBar: {
timeDivider: false,
durationDisplay: true,
remainingTimeDisplay: false,
fullscreenToggle: false
}
}
};
},
methods: {
onPlayerPlay(e) {
this.$refs.videoPlayer.player.play();
console.log(e);
},
paly() {
this.$refs.videoPlayer.player.play();
},
pluse() {
this.$refs.videoPlayer.player.pause();
}
}
};
</script>
3. css
<style>
.input_video {
padding-top: 200px;
width: 100%;
margin: 0 auto;
}
button {
width: 50px;
height: 30px;
}
</style>
参考文档