LeCheng
Search K

Appearance

音视频相关 ​

xgplayer三部分文件组成 ​

  • 皮肤文件 - skins
  • 工具文件 - utils
  • 控制逻辑 - controls
  • 集成第三方插件(都是以继承的方式使用)

主文件可以分为两个

  • player.js -- 播放器交互逻辑行为
  • proxy.js -- video自身逻辑行为

所有事件的联系都通过发布订阅模式来通信

  • defaultVideoEventHandler
  • pluginsCall

video支持三种视频格式 ​

  • MP4 = MPEG 4文件使用 H264 视频编解码器和AAC音频编解码器
  • WebM = WebM 文件使用 VP8 视频编解码器和 Vorbis 音频编解码器
  • Ogg = Ogg 文件使用 Theora 视频编解码器和 Vorbis音频编解码器

对比

video视频的两种加载形式 ​

  • 一种是非视频流形式加载，如mp4格式,加载逻辑是受浏览器控制
  • 一种是视频流的是形式加载，如FMP4格式，FLV格式,M3U8格式，webm格式

流式加载的好处就是 ​

  • 平滑的进行清晰度切换
  • 非流式的首屏加载太慢
  • 更精准的seek，预加载的控制，视频的无缝切换

MSE ​

规范允许通过JavaScript为<audio> 和 <video> 动态构造媒体源,js处理过的视频流。这样就可以精准的控制。 mse兼容情况：https://caniuse.com/?search=media source

流式视频播放可服务对象 ​

  • 直播方案
    • RTMP推流 + HSL拉流
      • 兼容性好适用于各端
      • 延迟较大（延迟主要来自编码解码时产生延迟、网络延迟、CDN 分发延迟。由于它是切片协议，延迟分两大块，一个是服务端有切片缓冲延迟，另一个是在播放端防抖缓冲会有延迟。切片的大小和数量都会 HLS 影响延迟大小，一般在十秒以上，拉流端在等数据）将数据转化成mp4形式的格式
    • RTMP推流 + FLASH拉流
      • 兼容性不好，只适用于PC和客户端
      • 但延迟较低
    • HTTP-FLV协议
      • 移动端webview只适合高版本的安卓,可以通过flv.js编码成可播放视频流格式其关键在于浏览器端支持MSE
      • 穿透性好透防火墙，它是基于 HTTP/80 传输，有效避免被防火墙拦截
      • 不便于seek
    • webrtc
      • 目前兼容不好，浏览器厂商并没有一个统一的标准

HTTP Live Streaming
mp4相比m3u8第一帧加载较慢的原因
m3u8视频格式分析
可以用WebRTC来做视频直播吗？
[封装]ts和mp4(fragment fmp4)的区别以及理解
Fragment mp4 优势 与TS对比
请求mac系统上有没有类似于mp4Info这一类的mp4文件结构分析器呢？
H5直播系列二 MSE(Media Source Extensions)
基于FLV视频的RTMP和HTTP区别
RTMP、HTTP-FLV、HLS，你了解常见的三大直播协议吗「媒体源扩展(Media Source Extensions)」是什么，有什么应用场景？
HTML5实现视频直播功能思路详解
一文搞懂TCP与UDP的区别 为什么现在的视频直播不使用RTSP协议而是使用RTMP？
如何理解 rtmp 通过 flv 格式推送音视频流(h264/aac)
科普：CBR、VBR、FPS、关键帧什么意思？直播推流参数该如何设置
视频流媒体服务器RTMP和RTSP区别是什么？如何区分？
HLS直播的那些坑理解RTMP、HttpFlv和HLS的正确姿势
mp4文件格式解析
浏览器不支持flash插件之后，h5播放rtmp直播流的解决方案使用flv.js快速搭建html5网页直播
使用flv.js做直播
Vue整合Rtmp流实现无Flash播放[flv+websocket篇]
使用flv.js + websokect播放rtsp格式视频流

上次更新于: