视频直播服务目前支持3种直播协议：RTMP、HLS、HTTP-FLV。

本文主要讲解在 Vue 项目中如何使用 vue-video-player 播放器播放 rtmp 流。

1.准备工作

cnpm install --save vue-video-player

cnpm install --save videojs-flash

cnpm install --save videojs-swf

2.代码实战

import { videoPlayer } from 'vue-video-player'

import 'video.js/dist/video-js.css'

import 'videojs-flash'

import SWF_URL from 'videojs-swf/dist/video-js.swf'

export default {

components: {

videoPlayer

},

data () {

return {

playerOptions: {

autoplay: true,

sources: [{

type: 'rtmp/mp4',

src: 'rtmp://58.200.131.2:1935/livetv/hunantv' // 亲测可用

}],

techOrder: ['html5', 'flash'],

flash: {

swf: SWF_URL

}

}

}

}

}

3.解决问题

Q1: 控制台报错 The "flash" tech is undefined. Skipped browser support check for that tech.

方案1(无效)：删除 node_modules，再用 npm 安装；

方案2(有效)：查看 vue-video-player 和 videojs-flash 的 package.json，发现这2个插件最新版引入的 video.js 版本没有严格统一，怀疑和插件版本有关，故进行版本降级，如下：

"dependencies": {

"vue-video-player": "5.0.1",

"videojs-flash": "2.1.0"

}

方案3(未验证)：以下解决方案来自 vue-video-player issues#221

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

// webpack.config.js

resolve: {

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

...

}

Q2: 控制台报错 Cross-origin plugin content from https://vjs.zencdn.net/swf/5.4.1/video-js.swf must have a visible size larger than 400 x 300 pixels, or it will be blocked. Invisible content is always blocked.

当直播视频设置了 autoplay: true，并且宽高小于400x300，例如直播墙的需求，这时便出现如上报错。

2个关键点：1.跨源插件 2.大于400x300，解决其一便能自动播放。视频窗口大小取决于需求，不可控制。针对跨源插件，需要安装上述版本的videojs-swf插件，import即可。

注：引入 videojs-swf@5.4.1 的插件，需要在 vue.config.js 中加入 chainwebpack 配置，否则项目运行会报错：无法找到相关 loader

// vue.config.js

module.exports = {

chainWebpack: config => {

config.module

.rule('swf')

.test(/\.swf$/)

.use('url-loader')

.loader('url-loader')

.options({

limit: 10000

})

}

}

参考文档