360前端星计划—Web前端点播直播入门（胡尊杰）

1. 什么是视频

本节介绍了：视频格式&内容容器、视音频编码、传输协议、播放器原理。
通过这些信息的了解，能大致掌握视频存储和应用的基本原理。

1.1 格式和内容

• 文件扩展名≈媒体封装格式(媒体容器类型)
• 媒体封装格式≠音视频编码格式(使用了谁家的编码器)
• 文件内容：
  • 头信息(格式、时长、帧率、码率、分辨率…)
  • 索引信息
  • 视频数据
  • 音频数据
  • 附加增强数据…

1.2 视频数据

• 显示器颜色呈现基于RGB(红绿蓝)颜色空间模型
• 视频领域大多基于YUV颜色空间做抽样存储
• 帧内预测&帧间预测复用进一步有效的压缩数据
• P帧(前向预测帧)、B帧(双向预测帧)、I帧(参考帧)
• 基于通用标准集N多技术于一身 — 视频编码器
  H.264(AVC)、H.265(HEVC)、VP8、VP9…

1.3 音频数据

• 声音：不同振幅&频率而产生的机械波；数字形式是一维波形
• 对自然中连续的声波采样，做数字化PCM存储
• 扬声器还原PCM(脉冲编码调制)数字信号为模拟音频信号
• 音频压缩基本算法：预测、变换
• 基于通用标准集N多技术于一身 — 音频编码器​​​​​​​
  AAC、MP3…

1.4 传输协议

• 传统场景

  • 流媒体(直播)
    HLS：苹果为利用现有CDN设施而发明的"流媒体"协议；
    HTTP(S)-FLV：基于HTTP的流媒体协议
    RTMP、RTP/RTSP、TS、MMS…

• 点播传输
  HTTP(S)：通过Range方式或参数方式完成Seek

• Web端
  HTTP(S)、WS(S)、P2P…

1.5 播放器原理

• 解协议(加载数据)
• 解封装(解复用)
• 解码
• 渲染

2. 好玩的Web端API

本节通过具体的实例介绍了：视频播放控制、数据获取&采集、录制存储、创建动态媒体源播放。
本章节涉及内容配合网络存储、实时传输，可以试着实现好玩的应用，而且不限于点播或直播。

2.1 媒体兼容判断

let videoEl = document.createElement("video");
let types = {
   
  'mp4': 'audio/mp4',
  'MP4': 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"',
  'webm': 'video/webm; codecs="vp8, vorbis"',
  'ogg': 'video/ogg; codecs="theora, vorbis"',
  'm3u8': 'application/vnd.apple.mpegURL',
  'ts': 'video/mp2t; codecs="avc1.42E01E,mp4a.40.2"'
};

Object.keys(types).forEach(key => {
   
  const type = types[key];
  const ret = videoEl.canPlayType(type) || '不支持';
  console.log(key + ': ' + ret);
});

2.2 基于Video时间轴控制实现交互式视频

let video = $('video');

video.ontimeupdate = ()=>{
   
  let {
   currentTime} = video;
  show(currentTime > 64 ? '.s2' : '.s1');
  hide(currentTime > 64 ? '.s1' : '.s2');
  if(
     (currentTime > 64 && currentTime < 65) || 
     (currentTime > 113 && currentTime < 114)
  ){
   
    video.pause();
  }
};

let ppBtn = $('paly_pause');
video.onplay = ()=>{
   
  ppBtn.innerText = '暂停';
};
video.onpause = ()=>{
   
  ppBtn.innerText = '播放';
};
ppBtn.onclick = ()=>{
   
  video[video.paused ? 'play' : 'pause' ]();
};
$('start').onclick = ()=>{
   
  video.currentTime = 1;
  video.play();
};
$('step').onclick = ()=>{
   
  video.currentTime = 60;
  video.play();
};
$('dream').onclick = ()