江苏龙网

  1. 首页 > 人文 > >

CSDN：珍稀干货！阿里 Web 音视频开发趟坑指南


CSDN：珍稀干货！阿里 Web 音视频开发趟坑指南
本文插图
作者 | 阿里文娱前端技术专家 归影责编 | 夕颜出品 | CSDN（ID:CSDNnews）这不是一篇基于MSE开发Web播放器的入门文章 ， 而是围绕Web播放器开发遇到的常见问题与解决方案 ， 毕竟入门文章常有而趟坑干货不常有 。 如果您有Web播放开发经验和音视频技术基础 ， 读起来会更有共鸣 。
Web播放器开发基础知识
先介绍Web播放器开发的一些基础知识 。 有人要问了 ， Web播放器开发难道不是一个video标签就够了么？非也！
1、浏览器Video支持的格式非常有限
在W3C的标准里面Video只支持MP4格式 准确的说是ISOBMFF(Fragment MP4) 。 当然chrome支持WEBM ， safari支持HLS(MPEG-TS)这都是自家的私有实现 ， 做不得数 。
2、浏览器Video无法逐个加载视频切片
现在主流的流媒体点播/直播技术 ， 都会把视频切片 。 而video标签src只能挂载整个MP4资源 。 没法逐个的加载视频分段 。
所以我们的主角出场—— MediaSource Extenstion ， 简称MSE ， 是一套能不断的把音视频二进制数据塞给video标签播放的API 。
CSDN：珍稀干货！阿里 Web 音视频开发趟坑指南
本文插图
图1：MSE简明结构MSE内部可以创建一系列的sourcebuffer ， 一般是一个音频buffer ， 一个视频buffer 。 把MSE做成blob url之后绑定给video的src 。 然后就可以通过appendBuffer往video里追加音视频数据了 。 有了MSE ， 播放器器的整体结构是什么样的呢 ， 见下图 。
CSDN：珍稀干货！阿里 Web 音视频开发趟坑指南
本文插图
图2：Web播放器简明结构
首先在浏览器层面 ， 主要使用video标签、MSE、XHR 和UI 。 那么播放器主要由Manager驱动加载视频的playlist（比如HLS里的m3u8 ， dash里的MPD ， FLV虽然不是playlist概念 ， 但是是原理上差别不大 ， 都是为了拿到视频的一个个的片段的地址） ， 并通过数据服务加载这一个个的分片 。 然后通过transmuxer也就是所谓的转封装器 ， 把分片的封装格式比如TS拆开（demux） 把连原始的音视频数据解出来 ， 再重新打包成fmp4(remux) ， 最后通过MSE API喂给video标签里 ， 让video去播放 。
因此播放器所做的事情最主要有两点：
1） 转封装 。 即将video不支持的封装格式转码成video所支持的封装格式；
2） 如何驱动整个播放进行 。 即决定何时下载下一个分片 ， 何时需要解码插入到video的buffer里 。
时间戳对齐
转封装除了的封装格式的解复用(demux)和再复用（remux）之外最重要的环节就是分片的时间戳对齐策略 ， 以及音视频同步 。
CSDN：珍稀干货！阿里 Web 音视频开发趟坑指南
本文插图
图3（传说中的“开局一张图 原理全靠猜”）简单讲一下上图：红色代表音频的时间轴 。 蓝色/青色是视频的时间轴 。 PTS(Presentation Time Stamp) 指的是这一帧需要渲染的时间 。 DTS(Decoding Time Stamp) 指的是这一帧需要解码的时间 。
1、首片首帧的对齐策略
正常来说音频PTS和DTS是一样的 ， 而视频如果有B帧的话DTS往往要比PTS早一些(因为要预留一定的时间解码) 。 因此视频的首帧会有一个洞(gap/shift随便你怎么叫) ， 如果不经处理插到video里 ， 那么video里的buffer也会呈现出一小段的洞 ， 一般是0.08s(比如10s的分片 插进去可能出现0.08~10.08的情况) 。 现在主流的做法是削掉这个洞 。 就是把DTS跟PTS强行拉平 ， 一般来说chrome 不会出现太大的问题 。 但是safari不行 ， 如果不预留一定的DTS/PTS偏移 ， safari前两帧的播放会明显卡顿 。


推荐阅读


上一篇：传染病@快递员“摆地摊”、出租车“份子钱”……这场发布会上都回应了

下一篇：【】诺基亚以复刻老机型为生，当年的机皇已经沦落到贩卖情怀