Web直播之RTMP协议：vue-video-player +
2020-07-29 本文已影响0人
Crisyhuang
视频直播服务目前支持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.代码实战
<template>
<div>
<video-player :options="playerOptions"></video-player>
</div>
</template>
<script>
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
}
}
}
}
}
</script>
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
})
}
}
