html5支持 h265,从 Chrome 源码 video 实现到 Web H265 Player

在多年以前，我们网页视频播放都只能依赖Flash或者其他第三方插件才能播放，后来基于HTML5的Video出来后，就渐渐的去Flash了。

直接使用HTML5 Video非常的方便：

现在绝大多数的网站已经从Flash播放转向了浏览器原生的Audio/Video播放，那浏览器是如何加载和解析多媒体资源的，这对于web开发者来说是一个黑盒，所以今天就跟大家一起来看一下浏览器具体是怎么实现的？

在看具体原理之前，我们先来看下Video完整的播放流程/事件。

Video 播放完整流程

所以基于上面的流程，我们现在对于视频播放首帧的定义就比较清楚了，这里主要分自动播放、点击播放

自动播放首帧：loadstart(视频准备开始请求加载数据)到 timeupdate (播放进度变化)

点击播放首帧：play(用户点击play)到 timeupdate(播放进度变化)

当然上述流程是在PC的表现，实际上针对这些事件IOS和Android下会有一些差异，这里不细讲。在大致了解了完整的播放流程后，我们就来重点看下，浏览器是如何加载和解析多媒体资源的？这里我们以Chrome为例。

Chromium 多媒体请求和解码流程

首先，早期Chromium文档中对于整体的过程是这样的(目前来看有点过时了，但是核心的原理是一致的)

大体来说，由Webkit请求创建一个媒体video标签，创建一个DOM对象，它会实例化一个WebMediaPlayerImpl，这个player是整体的控制中枢，player驱使Buffer去请求多媒体数据，然后交由FFmpeg进行多路解复用和音视频解码(FFmpeg是一个开源的第三方音视频解码库)，再把解码后的数据传给相应的渲染器对象进行渲染绘制，最后让video标签去显示或者声卡进行播放。

现在最新的Chromium Media针对媒体播放管道比较全的概述如下：

通过上面