1.安装@liveqing/liveplayer
npm i @liveqing/liveplayer
2.引入插件(这里是封装了视频组件)
<template>
<LivePlayer
class="component-wrapper video-panel"
:class="{ fullscreen: flag }"
:videoUrl="options.url"
:videoTitle="options.title"
:poster="options.poster"
:controls="options.controls"
:autoplay="options.autoplay"
:live="options.live"
:hide-snapshot-button="options.hideSnapshot"
:muted="options.muted"
:fluent="options.fluent"
:stretch="options.stretch"
:aspect="options.aspect"
:loading="options.loading"
:hide-big-play-button="options.hideBigPlay"
@fullscreen="onFullscreen"
>
<slot></slot>
</LivePlayer>
</template>
<script>
import LivePlayer from "@liveqing/liveplayer";
export default {
name: "VideoPanel",
components: {
LivePlayer,
},
props: {
params: {
type: Object,
default: function () {
return {
url: "",
};
},
},
defaultOpts: {
type: Object,
default: function () {
return {
// 播放地址
url: "",
// 视频标题
title: "",
// 视频封面图片
poster: "",
// 播放器控制栏
controls: true,
// 隐藏截图
hideSnapshot: true,
// 是否直播
live: false,
// 是否自动播放
autoplay: true,
// 是否静音
muted: true,
// 流畅模式
fluent: true,
// 是否拉伸
stretch: true,
// 全屏 - 适应div
aspect: "fullscreen",
// 指示加载状态
loading: true,
// 隐藏起播状态下的大播放按钮
hideBigPlay: true,
};
},
},
},
data() {
return {
options: {},
flag: false,
};
},
watch: {
params: function (newVal) {
// if (newVal) {
this.options.url= newVal;
// }
},
},
created() {
this.options = Object.assign({}, this.defaultOpts, this.params);
},
beforeDestroy() {
if (this.options) {
this.options.url = "";
}
this.onExitFullscreen();
},
methods: {
onExitFullscreen() {
this.flag = false;
},
onFullscreen(status) {
this.flag = status;
if (!status) {
this.onExitFullscreen();
return;
}
},
},
};
</script>
<style lang="scss" scoped>
.component-wrapper.video-panel {
position: relative;
width: 100%;
height: 100%;
.video-wrapper .video-js {
background-color: rgba(32, 46, 71, 0.6);
.video-title {
top: 4px;
right: unset;
left: 4px;
padding: 4px 6px;
max-width: 80%;
font-size: 16px;
}
.video-control {
position: absolute;
top: 100%;
left: 50%;
transform: translate(-50%, -140%);
margin-top: 0;
}
}
&.fullscreen .video-wrapper .video-js {
.video-title {
top: 60px;
right: unset;
left: 20px;
padding: 5px 8px 6px;
background: rgba(4, 16, 37, 0.6);
border-radius: 4px;
}
}
}
</style>
3.使用
<template>
<div>
<div class="video-box">
<div class="video">
<video-panel :params="videoLeftUrl"></video-panel>
</div>
<div class="video">
<video-panel :params="videoRightUrl"></video-panel>
</div>
<div class="video">
<video-panel :params="videoRtspUrl"></video-panel>
</div>
</div>
</div>
</template>
<script>
import VideoPanel from "@/components/video/VideoPanel.vue";
export default {
components: { VideoPanel },
data() {
return {
videoLeftUrl:"",
videoRightUrl:"",
videoRtspUrl:"",
}
}
}
</script>
正常来说这就可以是吧 但是这里还需要以下几步:
1.安装插件copy-webpack-plugin 请下载这个版本 最开始直接下的最新版 起不来哈
npm i copy-webpack-plugin@4.6.0
2.在vue.config.js中如下配置
const CopyWebpackPlugin = require('copy-webpack-plugin')
module.exports = {
configureWebpack: config => {
// 视频播放
config.plugins.push(
new CopyWebpackPlugin([
{
from: 'node_modules/@liveqing/liveplayer/dist/component/crossdomain.xml'
},
{
from: 'node_modules/@liveqing/liveplayer/dist/component/liveplayer.swf'
},
{
from: 'node_modules/@liveqing/liveplayer/dist/component/liveplayer-lib.min.js',
to: 'js/'
}
])
)
},
devServer: {
port: 1888,
}
}
3.在public/index.html 中引用 liveplayer-lib.min.js
<head>
<script type="text/javascript" src="<%= BASE_URL %>js/liveplayer-lib.min.js"></script>
<script type="text/javascript" src="<%= BASE_URL %>js/liveplayer-component.min.js"></script>
</head>
即可完美启动 但是这个插件不可以直接播放rtsp流 转化视频流过程中可能回出现延迟问题 如需解决请看下篇