直播 工作原理 直播流

1. 直播原理

1.1 直播过程

视频采集 --> 视频编辑 --> 播放器

视频编辑细节

压缩编码（H.264/AAC） --> 字幕叠加 --> 推流 --> CDN

1.2 浏览器对视频格式兼容

格式 | 浏览器	Chrome	Firefox	Safari
mp4	ok	ok	ok
webm	ok	ok
hls			ok
flv

1.3 常用直播协议

HLS

视频格式是hls，直播点播都可以，文件是.ts
一般用在对实时性要求不高的场合，延时程度可以通过分片大小减轻，对服务器压力不大（并发）

工作原理：会先发送一个m3u8文件，里面包含很多的片段信息，但是时长有限，浏览器会在播放完这些片段前请求新的m3u8文件，就可以一直播

m3u8文件
m3u8是一个文本文件，可以嵌套多个m3u8文件

1. 开头会说明HLS协议的版本
2. PLAYLIST-TYPE，区分是点播还是直播
   动态列表 live playlist，直播
   静态列表 event playlist（很少用到）
   全量列表 vod playlist，点播
3. 片段时长
4. ENDLIST：一般点播需要用到，告诉浏览器不用像直播一样不断去请求数据

ts文件
第一个ts文件会有PAT、PMT、TS、TS、TS...
根据PAT文件找PMT文件
PMT文件包含TS文件信息，哪个是视频哪个是音频
多个TS组成帧、PES

RTMP（real time message protocal）

通信是基于TCP协议的（三次应答），传输过程的视频格式是flv，是专为流媒体开发的协议，主要用在flash、支持rtmp协议的服务器通信，比HLS复杂，但是实时性好，常用在采集端

HTTP-FLV

RTMP的升级版，通信是基于HTTP协议 长连接，视频格式是flv
优点：

1. 可以避免一些防火墙的干扰
2. 兼容HTTP 302跳转，灵活调度（某cdn的资源找不到，可以去其他cdn找）
3. 可以使用HTTPS加密
4. 移动端支持良好

2. video标签

video属性
控制图标显示 controls
静音 muted
自动播放 autoplay
循环 loop
预加载 preload

音量、播放时间、地址切换、备用地址控制 通过js

    var v = document.getElementById('video');
    v.volumn = 0.6
    v.currentTime = 10  // 单位秒
    v.src = 
    v.currentSrc = 

通过监听video的状态变化实现对视频的控制
video事件
开始加载 loadstart
时间变化 durationchange
加载元数据 loadmetadata
加载数据 loadeddata
继续加载 progress
能播放 canplay
流畅播放 canplaythrough
播放 play
暂停 pause
移动中 seeking
移动了 seeked
等待数据 waiting
正在播放 playing
时间更新 timeupdate
播放完了 ended
出错 error

   
    var v = document.getElementById('video');
    console.log('v.duration', v.duration);
    // loadstart
    v.addEventListener('loadstart', function(e) {
      console.log('loadstart', v.duration);
    });
    // durationchange
    v.addEventListener('durationchange', function(e) {
      console.log('durationchange', v.duration);
    });
    // loadedmetadata
    v.addEventListener('loadedmetadata', function(e) {
      console.log('loadedmetadata');
    });
    // loadeddata
    v.addEventListener('loadeddata', function(e) {
      console.log('loadeddata');
    });
    // progress
    v.addEventListener('progress', function(e) {
      console.log('progress');
    });
  

结果

v.duration NaN
loadstart NaN
durationchange 528.981333
loadedmetadata
progress
loadeddata

一开始 时长 是NaN
结果显示获得时长后才加载元数据
事实上 是先获得元数据

3. 直播流

需要用到的软件有nginx（服务），ffmpeg（视频采集，推流），safari（看效果），vcl（看效果）

4. 播放器选型

video.js 体积大，控制ui封装好了，插件多，直播点播都可以
hls.js 体积小，ui自己设置，用于HLS协议的点播直播
flv.js 体积小，ui自己设置，用于HTTP-FLV协议的点播直播

小程序直播
目前仅支持 flv, rtmp 格式
直播权限申请 直播控件 <live-player> <live-pusher>