vue web视频播放的一个记录

1.播放器选择
1.dplayer
2.liveplayer（此处选择这个）liveplayer

2.安装

npm install --save-dev video.js
npm install @liveqing/liveplayer
npm install flv.js

3.liveplayer在vue中使用
3.1 复制依赖文件

安装 copy-webpack-plugin 插件, npm install copy-webpack-plugin@4.6.0,
编辑你的 webpack.config.js

const CopyWebpackPlugin = require('copy-webpack-plugin');
module.exports = {
    
    
    configureWebpack: {
    
    
      plugins: [
        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/'},
        ])
      ]
    }
  }

3.2 html模板中引入依赖js

<script src="js/liveplayer-lib.min.js"></script>

3.3 编辑你的 Vue 组件

......

import LivePlayer from '@liveqing/liveplayer'

......
  components: {
    
    
    LivePlayer
  }
......

<LivePlayer :videoUrl="videoUrl" fluent autoplay live stretch></LivePlayer>