Vue直播

vue2.0+vue-video-player实现pc直播

我们做的直播项目用的是 Vue 框架，拉流推流使用的是腾讯云，输出为 RTMP 和 HLS 的直播流

再对比了几个播放器的使用程度和简易程度下选择使用 vue-video-player

这个是在 Github 上看到的一个项目 https://github.com/savokiss/vue-videojs-demo

安装插件

npm install vue-video-player -S

引用插件

import VideoPlayer from 'vue-video-player'

require('video.js/dist/video-js.css')

require('vue-video-player/src/custom-theme.css')

Vue.use(VideoPlayer)

使用

注意点

vue-video-player 其实就是 video.js 集成到 vue 中，所以千万不要再安装 video.js，可能会出错

播放 HLS 流，需要 videojs-contrib-hls 插件，（！直接引用，因为在安装vue-video-player插件时，hls插件是一并下载下来的），如果需要 RTMP 流，需要 videojs-flash 插件，也是直接引用就可以了（ flash 插件需要在 hls 之前引用）

import 'videojs-contrib-hls'

跨域问题

开发过程中遇到一个跨域问题，是流地址存在跨域，找了很多原因，一开始是以为是浏览器请求腾讯云流地址时出现了跨域，然而并不是，然后找到一篇文章是说阿里云的跨域问题，所以把问题锁定在腾讯云，但是找不到怎么配置，终于！我们强大的后台提了一个疑问，会不会是https和http跨域问题，我们的域名地址为https开头，腾讯的播放地址是http开头，想到的办法是更换域名，显然不现实，或者是代理域名，但是好像很麻烦，最后是在腾讯云找到了解决办法，处理一下就ok了，具体处理方法我也不知道，好像是需要后台和腾讯云配置一下就好了

demo地址

项目还没写完，所以先放一个demo的地址

https://github.com/dae0519/vue-video-player

补充

bilibili开源的播放器也是很不错的：flv.js