本文主要是介绍vue中使用@liveqing/liveplayer报错问题踩坑记录，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
1.安装@liveqing/liveplayer
npm i @liveqing/liveplayer2.引入插件（这里是封装了视频组件）
<template><LivePlayerclass="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,// 全屏 - 适应divaspect: "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.02.在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流 转化视频流过程中可能回出现延迟问题 如需解决请看下篇
这篇关于vue中使用@liveqing/liveplayer报错问题踩坑记录的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
