现在直播太流行了，除了一些直播app，斗鱼，抖音等，就连微信小程序都支持直播功能了
但是微信小程序的直播已经由微信官方封装了相对应的api，前端可以直接调用
所以，如果现在有个需求 ，就在web或H5页面通过js实现视频直播
相信很多前端前端跟我一样 ，对第一时间想到websocket的，通过心跳包之类的，但是今天推荐另外一种方式 - 插件（websocket基本使用 ， 后面文件再讲）
我们公司目前使用vue来开发后台管理系统 ，现在有个需求 ，做实时监控
后台在 萤石云 上拿到监控的视频地址 ，格式是.m3u8
.m3u8
M3U8 是 Unicode 版本的 M3U，用 UTF-8 编码。"M3U" 和 "M3U8" 文件都是苹果公司使用的 HTTP Live Streaming（HLS） 协议格式的基础，这种协议格式可以在 iPhone 和 Macbook 等设备播放
结果复制地址后，发现在web上直接下载了，然后就开始慢慢找寻方法...
最终是用vue-video-player这个插件解决了
1.下载vue-video-player
npm install vue-video-player --save
npm install videojs-contrib-hls --save
- 引入
main.ts
import VideoPlayer from 'vue-video-player'
require('video.js/dist/video-js.css')
require('vue-video-player/src/custom-theme.css')
Vue.use(VideoPlayer)
// 这个是为了兼容 m3u8
const hls = require('videojs-contrib-hls')
Vue.use(hls)
单页面
import { videoPlayer } from 'vue-video-player' // video 插件
// import 'videojs-contrib-hls' // 引入hls
require('video.js/dist/video-js.css')
require('vue-video-player/src/custom-theme.css')
// import '../index.scss'
@Component({
components: {
videoPlayer
}
})
- 组件
4.在页面中data中配置
playerOptions = {
// playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
autoplay: false, // 如果true,浏览器准备好时开始回放。
muted: false, // 默认情况下将会消除任何音频。
loop: false, // 导致视频一结束就重新开始。
preload: 'auto', // 建议浏览器在5.挂载视频组件（非必须）不写这一步也可以实现播放，添加这个是为了自定义按钮使用
get player() {
return this.$refs.videoPlayer.player//自定义播放
}
6.官方文档
video.js
vue-video-player
这样就可以完美解决了~~~
参考文章【https://segmentfault.com/a/1190000020149370】