H5直播

大前端

• 服务类
  • Node.js
  • express.js
  • koa.js
• 3d 数据图像
  • three.js
• 二维图像
  • d3.js
  • raphael.js
  • echart.js
• 视频
  • video.js
  • hls.js
  • flv.js

直播原理

• 播放器分为点播和直播，hls和flv主要用于直播

• HLS协议

  
  
  • 苹果推出的直播协议
  • 不会把视频地址给video,而是给M3U8文件这样的索引文件，safari可识别这种文件
  • M3U8文件对应多个片段（.ts文件）再去分别下载，在某个时间点之前会再去请求M3U8文件，去做更新，如此循环，去保证视频实时播放

  // M3U8文件（动态-直播）
  #EXTM3U // M3U8版本
  #EXT-S-VERSION:6 // M3U8版本声明
  #EXT-X-TARGETDURATION:10 //视频时长
  #EXT-X-MEDIA-SEQUENCE:26 // 序号
  #EXTINF:9.901,// 视频时长
  http://media/example.com/wifi/segment26.ts
  #EXTINF:9.901,
  http:media.example.com/wifi/segment27.ts
  #EXTINF:9.501,
  http://media.example.com/wifi/segment28.ts
  
  // M3U8文件（全量-点播）
  #EXTM3U // M3U8版本
  #EXT-S-VERSION:6 
  #EXT-X-TARGETDURATION:10 
  #EXT-X-MEDIA-SEQUENCE:0 
  #EXT-X-PLAYLIST-TYPE:VOD
  #EXTINF:9.9001,// 视频时长
  http://media/example.com/wifi/segment26.ts
  #EXTINF:9.9001,
  http:media.example.com/wifi/segment27.ts
  #EXTINF:9.9001,
  http://media.example.com/wifi/segment28.ts
  #EXT-X-ENDLIST // 浏览器不会重复更新M3U8文件
  

  • ts文件
    [图片上传失败...(image-8d2b64-1528817661041)]
    • PAT:找PMT的包
    • PMT:告诉你哪些ts是视频，哪些ts是音频
    • ts文件按照视频音频组成帧-PES

• RTMP协议

  • Real Time Messaging Protocol(实时消息传输协议)，基于TCP，用来进行实时数据通信的网络协议

• HTTP-FLV协议

  • 可以在一定程度上避免防火墙的干扰、可以很好地兼容HTTP 302跳转，做到灵活调度
  • 可以使用HTTPS做加密通道
  • 很好地支持移动端

video

• 属性和方法

• controls

• controlslist="nodownload nofullscreen" // 不要下载和全屏

• poster="..." // 贴图（视频封面）

• autoplay // 自动播放

• muted // 静音

• loop // 循环播放

• preload // 预加载

• volume:0-1之间 // 音量，js控制

• currentTime // 播放时间，秒，js控制

• 修改src // 播放地址切换

• 备用地址切换

  <video controls poster="./poster.jpg" width="400" height="225">
      <source src="./test.mp4" type="video/mp4"></source>
      <source src="./test-2.mp4" type="video/mp4"></source>
  </video>
  // 通过video的currentSrc即可获取当前video的播放地址
  

video事件

• loadstart 视频开始加载
• durationchange 监听时长变化，视频加载完元数据，拿到duration
• loadedmetadata 表示元数据下载完成，先触发durationchange再触发loadedmetadata
• loadedata 表示没有足够的视频帧和音频帧来播放，触发progress去下载帧
• progress 下载帧
• canplay 表示可以播放
• canplauthrough 表示有足够的帧可流畅播放
• play 监听播放事件
• pause 监听暂停事件
• seeking 点进度条某个点，并且会触发progress直到canplay和canplaythrough
• seeded 这次seek结束，在seeking,progress先触发，再seeded，再canplay和canplaythrough
• waiting 视频加载等待
• playing 数据播放过程中
• timeupdate 播放时间更新
• ended 播放结束
• error 报错

直播流的制作

• 方法一 Nginx + ffmpeg
  • 安装Nginx
  • 安装ffmpeg
  • 配置Nginx
  • 准备视频
  • 利用ffmpeg推流

brew install nginx --with-rtmp-module
brew install ffmpeg
// 配置Nginx
cd /usr/local/etc/nginx/

cd live-demo
ffmpeg -re -i test.mp4 -vcodec libx264 -acodec aac -f flv rtmp://localhost:1992/rtmplive/rtmp
// VLS打开network,访问rtmp://localhost:1992/rtmplive/rtmp

ffmpeg -re -i test.mp4 -vcodec libx264 -acodec aac -f flv rtmp://localhost:1992/hls/stream  
// safari 访问localhost:8080/hls/stream.m3u8

• 方法二 集成服务
  • 下载服务
  • 安装服务
  • 准备源视频
  • 开启服务
  • 利用ffmpeg推流

H5直播演练

• 播放器选型
  • video.js
    • 自定义UI
    • 丰富的插件，弹幕、清晰度切换、快捷键
  • hls.js
    • 适用于hls协议的直播和点播
  • flv.js
    • b站开源播放器