1.下载相应插件,只能通过npm或者yarn下载, cnpm下载后不可用
npm install video.js --save
npm install videojs-flash --save //rtmp格式
//flv格式
npm install flv.js --save
npm install videojs-flvjs-es6 --save
2.封装视频播放组件
<template>
<video
ref="videoPlayer"
class="video-js vjs-default-skin vjs-big-play-centered"
style="width: 100%;height: 100%"
></video>
</template>
<script>
import videojs from "video.js";
import "video.js/dist/video-js.css";
import "videojs-flvjs-es6";
import "videojs-flash";
export default {
props: {
videoUrl: {
type: String,
default: ""
}
},
data() {
return {
videoPlayer: null
};
},
mounted() {
this.handelVideoUrl();
},
methods: {
handelVideoUrl() {
let options = {
muted: true,
controls: true,//进度条
autoplay: false,//自动播放
loop: true,//是否循环
languages: {
"zh-CN": require("video.js/dist/lang/zh-CN.json")
},
language: "zh-CN",
preload: "auto"
};
const url = this.videoUrl.replace(/\s+/g, "");
if (url.indexOf("rtmp") > -1) {
//rtmp格式视频
options = {
...options,
techOrder: ["html5", "flash"],// 兼容顺序
sources: [{ src: this.videoUrl, type: "rtmp/flv" }]
};
} else if (url.lastIndexOf(".") > -1) {
if (url.substring(url.lastIndexOf(".") + 1) === "flv") {
//flv格式视频
options = {
...options,
techOrder: ["html5", "flvjs"],// 兼容顺序
flvjs: {
mediaDataSource: {
isLive: false,
cors: true,
withCredentials: false
}
},
sources: [{ src: this.videoUrl, type: "video/x-flv" }]
};
} else {
//其他格式视频
options = {
...options,
sources: [{ src: this.videoUrl, type: "video/mp4" }]
};
}
}
this.videoPlayer = videojs(this.$refs.videoPlayer, {
...options
});
}
},
destroyed() {
if (this.videoPlayer) {
this.videoPlayer.dispose();
}
}
};
</script>
3.模态框中引用组件
html代码:
<el-dialog
title=""
:visible.sync="dialogTableVisible"
:modal="false"
width="700px"
class="dialog-view"
@close="dialogTableVisible = false"
>
<hls-video
v-if="dialogTableVisible"
:videoUrl="currentFileUrl"
class="videoBox"
style="height: 370px"
></hls-video>
</el-dialog>
js代码
import HlsVideo from "./HlsVideo";
export default {
components: { HlsVideo },
data() {
return {
currentFileUrl: "", //当前视频地址
dialogTableVisible: false
};
},
}