vue中使用@liveqing/liveplayer报错问题踩坑记录

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流 转化视频流过程中可能回出现延迟问题 如需解决请看下篇