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

1.安装@liveqing/liveplayer

npm i @liveqing/liveplayer

2.引入插件(这里是封装了视频组件)






3.使用


正常来说这就可以是吧 但是这里还需要以下几步:
1.安装插件copy-webpack-plugin 请下载这个版本 最开始直接下的最新版 起不来哈

npm  i  [email protected]

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

 


即可完美启动 但是这个插件不可以直接播放rtsp流 转化视频流过程中可能回出现延迟问题 如需解决请看下篇

你可能感兴趣的:(video,vue.js,javascript,前端)