vue项目中应用vue-video-player与videojs-flash实现RTMP流播放

百度了实现方法：

1、npm安装vue-video-player与videojs-flash

2、再引入

3、配置参数

但一步一个坎，踩过的坑，有空就记下来，希望以后不跳进同一坑。

1、npm安装时，报错

npm ERR! errno: -4048,
npm ERR! code: ‘EPERM’,

重新安装了几次都没有成功，网上有说不能用cnpm啥的，也没解决。

删除目录C:\Users\Administrator\AppData\Roaming\npm-cache

npm cache clean --force

再安装都不成功。

npm cache verify

后来执行了检验命令后，安装成功，还是cnpm安装成功的。

正常安装依赖：

cnpm install vue-video-player --save 
cnpm install videojs-flash --save

2、vue组件中引用

import 'video.js/dist/video-js.css'
import 'vue-video-player/src/custom-theme.css'
import { videoPlayer } from 'vue-video-player'
import 'videojs-flash'


components: {
    videoPlayer,
  },

页面template中引用

<video-player ref="videoPlayer" :options="videoOptions" class="vjs-custom-skin videoPlayer" :playsinline="true"></video-player>

 设置视频播放参数

      // 视频播放
      this.videoOptions = {
          live: true,
          autoplay: true,
          fluid: true,
          notSupportedMessage: '暂时无法播放',
          controlBar: {
            timeDivider: true,
            durationDisplay: true,
            remainingTimeDisplay: false,
            fullscreenToggle: true // 全屏按钮
          },
          techOrder: ['flash'],
          flash: {
            hls: { withCredentials: false },
            swf: 'static/video-js.swf' // 引入静态文件swf
          },
          sources: [{ // 流配置，数组形式，会根据兼容顺序自动切换
            type: 'rtmp/mp4',
            src: 'rtmp://58.200.131.2:1935/livetv/hunantv' //这是芒果TV现场直播视频，地址是可以用的，最后需要替换成后端给的项目地址
          }]
        }

本以为会成功了，结果报错：

flash tech is undefined

查找问题，发现这句话：swf: 'static/video-js.swf'

自行下载了video-js.swf 并放到static目录下

还是报错，最后修改\build\webpack.base.conf.js

加入  modules: [path.resolve('node_modules'), 'node_modules'],

resolve: {
    extensions: [
        ....
        ],


    modules: [path.resolve('node_modules'), 'node_modules'],


    alias: {
        .....
    }
  },

再次启动，成功，但是被chrome拦截flash

3、设置浏览器

在浏览器设置中，搜索flash，网站设置--flash，把禁止去掉

刷新页面，加入允许列表中。

播放成功，折腾一个下午总算搞定了。

前端要学的东西还很多，加油了！