nqdy666 / videojs-live-demo

videojs例子,包含直播相关

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

videojs-live-demo

video js 样例代码,支持hls和flv直播

效果图

效果图

特性

  • 基于vue-cli@3工具生成
  • 支持hls、flv直播
  • 支持两路同时播放
  • 支持大小视频点击切换

用到相关的库

  • video-js@7.8.3
  • flv@1.5.0
  • videojs-flvjs@0.2.0
  • videojs-hlsjs-plugin@1.0.14 (hls.js)

文档参考

已知限制

文档

WEB直播方案与浏览器兼容问题总结

Demo代码相关

src/views/Home.vue文件中的/hls/video1.m3u8是直播的地址,如果地址存在跨域问题,可以在vue.config.js文件中proxy配置本地代理。

搭建直播推流服务

参看这个项目

https://github.com/nqdy666/nginx-live-serve-window-x64

开始

npm install

开发

npm run dev
或者 npm run serve

编译

npm run build

代码校验

npm run lint

videojs 错误信息

播放m3u8,使用video.js 断网后会一直转圈圈,不会报错。 播放m3u8,引入了videojs-hlsjs-plugin@1.0.14后,断网后报这样子的错误

HLS.js error: networkError - fatal: true - manifestLoadError
  • 研究m3u8切片,验证不同切片策略下直播的流畅度(一个切片3s,共9s缓存效果可以)(切片时长太小(1s)会页面在刷新的时候及其容易出现拼命加载中或者黑屏现象)
  • 在上述切片的情况下,pc谷歌浏览器使用videojs7播放m3u8视频依然会有卡顿的现象。故使用到hls.js播放,卡顿问题明显改善。故chrome使用hls.js播放。
  • 安卓企业微信和部分机型的微信(useragent显示MQQbrowser的微信),这种使用hls.js可以两路直播,但不稳定容易卡顿,使用浏览器自带播放器直播且稳定。

About

videojs例子,包含直播相关


Languages

Language:Vue 73.8%Language:JavaScript 15.1%Language:HTML 10.5%Language:CSS 0.6%