1. 安装
npm install vue-video-player --save
2. 在main.js入口文件中引入
import "videojs-contrib-hls";
import VideoPlayer from "vue-video-player";
require("video.js/dist/video-js.css");
require("vue-video-player/src/custom-theme.css");
Vue.use(VideoPlayer);
3. 在页面中引用
<video-player
style="width: 100%;margin: 0 auto;"
class="video-player vjs-custom-skin"
ref="videoPlayer"
:playsinline="true"
:options="playerOptions"
></video-player>
4. 配置数据
playerOptions: {
playbackRates: [0.5, 1.0, 1.5, 2.0],
autoplay: true,
muted: false,
loop: false,
preload: "auto",
language: "zh-CN",
aspectRatio: "16:9",
fluid: true,
sources: [
{
type: "application/x-mpegURL",