也是折腾了一个下午，各种百度参考各位大佬的代码，才实现。话不多说，这里总结一下吧
1、引入插件
npm install vue-video-player --save
npm install videojs-flash --save
注意：此处一定要使用npm引入，不能用cnpm，否则会报错（但是我没遇上，大佬总结的）
2、在需要使用的组件中引入相关文件
import 'video.js/dist/video-js.css'
import { videoPlayer } from 'vue-video-player'
import 'videojs-flash'
import SWF_URL from 'videojs-swf/dist/video-js.swf'
此处需要注意，SWF_URL 引用时会报错，（使用vue-cli 3.0搭建的项目），网上找了很多说在webpack.base.conf中配置url-loader，无奈，真的没有这个文件呐。
后来才知道3.0配置webpack的方法，链接双手供上https://cli.vuejs.org/zh/guide/webpack.html
3、配置swf文件的url-loader
在项目文件夹中找到 vue.config.js，在module.exports下找到chainWebpack方法，如果没有，需要自己新建，如果已存在，则从config.module开始拷贝即可，这里则演示一下没有的情况。
chainWebpack(config) {
config.module
.rule('swf')
.test(/\.swf$/)
.use('url-loader')
.loader('url-loader')
.options({
limit: 1024,
name: 'file/[path][name].[hash:7].[ext]'
})
.end()
}
4、核心代码
回到刚才的组件中初始化vue-video-player，具体代码如下，这里就不加入import部分了
<template>
<div class="app-container">
<videoPlayer
ref="videoPlayer"
style="height: 350px"
class="vjs-custom-skin videoPlayer"
:options="videoOptions"
:playsinline="true"
/>
</div>
</template>
<script>
export default {
name: 'Index',
inject: ['reload'],
components: { videoPlayer },
data() {
return {
videoOptions: {
live: true,
autoplay: true,
fluid: true,
notSupportedMessage: '暂时无法播放',
controlBar: {
timeDivider: true,
durationDisplay: true,
remainingTimeDisplay: false,
fullscreenToggle: true // 全屏按钮
},
techOrder: ['flash'],
flash: {
hls: { withCredentials: false },
swf: SWF_URL // 引入静态文件swf
},
sources: [{ // 流配置，数组形式，会根据兼容顺序自动切换
type: 'rtmp/mp4',
src: 'rtmp://58.200.131.2:1935/livetv/hunantv' // 这是芒果TV现场直播视频，地址是可以用的，最后需要替换成后端给的项目地址
}]
}
}
}
}
<script>
5、最终效果
image.png
6、其他问题
-- 视频出不来，出现下图画面，点击启用即可
image
image
-- 在开发过程中，这个视频是在el-dialog中打开的，在我关闭dialog时会报错
image.png
原因应该是未销毁这个视频实例，在关闭时调用以下事件就可以了
this.$refs.videoPlayer.dispose()
但是，如果此时再想打开这个dialog播放，就会发现，行不通了。所以上述销毁，只适合只打开一次的情况
研究了一下，发现可以给video增加 v-if 来控制它的显示和隐藏，并增加了动态切换地址，以保证每次打开都可以显示对应的rtmp
this.videoOptions.sources[0].src = '' // 处放对应的流地址
-- 最后，大谷歌就要不支持Flash了，还没想好怎么办。搜索了一下，如果rtmp不用flash播放怎么解决，emmm，大概意思就是，只能换流了。
