video.js
在 Vue 中应用
我们做的直播项目用 Vue 编写，后台主要输出 RTMP 和 HLS 的直播流
播放器使用的是 vue-video-player，其实就是 video.js 集成到 vue 中
注意点
下面说说用这个插件来直播的一些坑和注意点吧：
首先，常用的 demo 在 vue-video-player 中官方已经给出了，按要求来就可以，其中
如果需要播放 HLS 流，需要安装 videojs-contrib-hls 插件，非原生支持的浏览器，直播服务端需要开启 CORS（后面会讲到）
如果需要播放 RTMP 流，需要安装 videojs-flash 插件
如果两个流都需要播放，flash 插件需要安装到 hls 插件之前
兼容性
下面说下这两个直播流的兼容性问题
RTMP: 上面说了 RTMP 是 Adobe 公司研发的协议，目前主要的直播服务都主推 RTMP 流，它延时小，但是需要 flash 插件的支持，也需要的上面提到的安装 videojs-flash 的插件。但是在 MAC 下对 flash 插件支持不友好，而且 MAC 下的 flash 插件 firefox 浏览器和 chrome 还是两个插件。。这就很尴尬。
HLS: 这个协议兼容性较好，但是最大的缺点是延迟较高，大概 20s 左右，所以只能当做备选方案。
说 HLS 兼容性较好，主要是指可以通过 JS 让用户免配置（不必安装flash），可以在 caniuse 看下 HLS 的支持程度：http://caniuse.com/#search=HLS
只有 Edge 和 Safari 提供原生支持，其他浏览器都需要 JS 插件支持。那是不是只要引了 videojs-contrib-hls 就 ok 了呢？❌，这里面还有个坑。这个坑在该插件的官方文档有说明：
Unlike a native HLS implementation, the HLS tech has to comply with the browser’s security policies. That means that all the files that make up the stream must be served from the same domain as the page hosting the video player or from a server that has appropriate CORS headers configured. Easy instructions are available for popular webservers and most CDNs should have no trouble turning CORS on for your account.
简单的意思就是：除了原生支持 HLS 的浏览器，其他浏览器要想播 HLS，需要直播流服务端开启 CORS。
最后我们使用的方案是。优先使用 RTMP 流，如果不支持，就切换到 HLS 流。好在这个切换过程 video.js 会自动替我们做。下面贴一下相关配置代码。
playerOptions: {
autoplay: false, // 自动播放
controls: true, // 是否显示控制栏
techOrder: [‘flash’, ‘html5’], // 兼容顺序
sourceOrder: true, //
flash: { hls: { withCredentials: false } },
html5: { hls: { withCredentials: false } },
sources: [{ // 流配置，数组形式，会根据兼容顺序自动切换
type: ‘rtmp/mp4’,
src: ‘rtmp://184.72.239.149/vod/&mp4:BigBuckBunny_115k.mov’
}, {
withCredentials: false,
type: ‘application/x-mpegURL’,
src: ‘http://playertest.longtailvideo.com/adaptive/bipbop/gear4/prog_index.m3u8’
}],
poster: “/static/img/no_data.png”, // 播放器默认图片
// controlBar: { // 配置控制栏
// timeDivider: false, // 时间分割线
// durationDisplay: false, // 总时间
// progressControl: true, // 进度条
// customControlSpacer: true, // 未知
// fullscreenToggle: true // 全屏
// },
},
Vue 实例中的播放器 options，更多代码见 https://github.com/savokiss/vue-videojs-demo
- My GitHub
- Demo vue-video-player Demo
- 常见推流协议
- 开启CORS 原文链接Demo vue-video-player Demo 常见推流协议