vue项目基于vue-video-player实现rtmp直播流

vue播放器插件

项目要求：

我们做的是一个监控项目，需要实时监控某机器，播放器在监控页面可拖动。

插件选择：

项目是vue框架，播放器选择了vue-video-player插件， vue-video-player，其实就是 video.js 集成到 vue 中 ，视频流选择rtmp格式，实时性高，稳定性也高，但是依赖flash插件。

使用步骤

• 安装 vue-video-player

npm install vue-video-player -S

• 引用插件

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

注意:
1、vue-video-player 其实就是 video.js 集成到 vue 中，所以千万不要再安装 video.js，可能会出错。
2、播放 HLS 流，需要 videojs-contrib-hls 插件，（！直接引用，因为在安装vue-video-player插件时，hls插件是一并下载下来的），如果需要 RTMP 流，需要 videojs-flash 插件，也是直接引用就可以了（ flash 插件需要在 hls 之前引用）

• 使用插件播放器

注意事项：

1、autoplay: true，不能自动播放，因为flash插件内部的问题吧，视频的宽度不能小于400，如果小于400自动播放就不生效。

解决办法：
设置 video 播放器的 宽度大于等于 400；

2、因为我这边有可以动态折叠video播放器的功能，之前用的v-show去实现的，发现每次折叠隐藏播放组件后都会报错：this.el_.vjs_getProperty is not a function

videojs-flash.es.js?b5c1:582 Uncaught TypeError: this.el_.vjs_getProperty is not a function
    at Flash.buffered (videojs-flash.es.js?b5c1:582)
    at Flash.bufferedPercent$$1 [as bufferedPercent] (video.cjs.js?3d33:8176)
    at Flash.eval (video.cjs.js?3d33:8118)
    at Flash.bound (video.cjs.js?3d33:2344)
    at bound (video.cjs.js?3d33:2344)

猜测应该是折叠后flash获取不到他的视频流报的错。

解决办法：
使用v-if代替v-show,并且在不显示的时候使用 dispose() 方法销毁 VideoPlayer 实例组件， this.$refs.videoPlayer.dispose(); v-if 为 true 的时候去自动重建 VideoPlayer 实例组件。

3、“The “flash” tech is undefined. Skipped browser support check for that tech”报错

VIDEOJS: ERROR: The "flash" tech is undefined. Skipped browser support check for that tech.

初级解决方案：

使用cnpm安装就会报错，使用npm安装video相关模块没问题，如果对使用 cnpm 还是npm 没有特定要求的话，可以使用这种方法解决。不过这不是最好的解决方案，只会治标不治本。

最终解决方案：

不管是删除node_module还是使用npm都不是根本的解决方案，根本原因是videojs和videojs-flash里的各有一个video.js，如果两个版本不一样可能就会报错了，终极解决方案就是配置第三方模块的查找顺序，优先查找本身安装的videojs就可以了

修改 webpack.config.js 文件

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

注意： 如果是用vue-cli3项目脚手架搭建的项目，修改vue.config.js 文件

configureWebpack: (config) => {
    config.resolve.modules[0] = path.resolve(__dirname, 'node_modules');
    config.resolve.modules[1] = 'node_modules';
  },

这里为什么要用这个方法呐，是因为vue-cli3 构建出来的项目里面，modules会存在三个不同的node_modules:

第一个：自身某块里的node_modules;
第二个：根目录里面的node_modules;
第三个：使用vue-cli3 构建项目,项目运行的时候会创建一个node_modules；

所以这里我们不能用覆盖的方法，只能使用更改modules数组某个元素的方法去更改查找顺序

至此问题解决！