HTML5Video實现浅析.docVIP

HTML5 Video 实现浅析 ——基于android4.1browser 1.???? 基本结构 先上一张基本结构图，图中展示了webkit中与HTML5 Video实现相关的一些类。 1.1??DOM Tree Video标签在webkit内部对应于HTMLVideoElement类，该类的功能并不多，大多数的功能都在其父类HTMLMediaElement中。 1.2??Render Tree HTMLVideoElement和HTMLMediaElement分别对应的Render节点是RenderVideo和RenderMedia。它们也一般的Render节点不同，它们只负责layout来确定位置信息，而并不需要绘制（虽然有paint函数，但实际并没有调用到）。 1.3??Bridge MediaPlayer类指的是WebKit中定义的MediaPlayer类（而不是系统定义的），它只是一个桥接类，相关功能交由MediaPlayerPrivateInterface类实现，并将某些反馈信息回调给HTMLMediaElement。 1.4??Player 按照webkit的一贯风格，MediaPlayerPrivateInterface只是一个基类，具体需要不同的平台来提供具体实现。Android平台下为MediaPlayerPrivate类，它也是一个基类，分别由MediaPlayerVideoPrivate和MediaPlayerAudioPrivate来实现。很显然，它们分别对应Video和Audio的实现。 ?? 上述是webkit内的类，下面再看看webkitporting之后外部的类结构： 可以看到，这些类大多数都是轻量级类，它们主要负责功能转发。最终实现类是android中的MediaPlayer类（请与前述MediaPlayer区别开来）。至于该MediaPlayer再怎么实现，已不在本文的讨论范围内。值得注意的是，HTML5VideoViewProxy类继承自Handler，它转发到VideoPlayer的消息使用了android的异步调用机制。 2.???? 操作控制 同过上述基本结构的介绍，我们可以想象一个播放器操作，如play，seek等，它们从HTMLMediaElement发出，最终一步一步到达android的Mediaplayer。下面是一个seek过程的调用堆栈： #0? WebKit::HTML5VideoViewProxy::seek #1?WebCore::MediaPlayerPrivate::seek #2?WebCore::MediaPlayer::seek #3? WebCore::HTMLMediaElement::seek #4?WebCore::MediaControlTimelineElement::defaultEventHandler 当然基本流程是这样，有时候也不是一成不变的，比如play就有多种方式，多种流程来实现。具体问题具体分析，打一个断点一切流程都一目了然。 上图展示的是一个播放器状态转移情况，只有这么几种状态，还是很好理解的，这里就不赘述了。 3.???? 渲染流程 上述业务操作逻辑比较简单，我们更感兴趣的是video的显示过程，也就是渲染流程。前面说过，RenderVideo虽然有paint函数，但并没有派上用场。那是怎样完成渲染的呢？还需要从webkit的渲染结构说起。 这张图片所展示的内容大家应该都很熟悉，是webkit中的基础结构。但这还没有完，在硬件加速渲染下，还需要更多的结构来支持： 如果大家对这些结构不熟悉，可以参考：/milado_nju/article/details/7292131和/milado_nju/article/details/8900792?两篇文档。 GraphicsLayer也是一个基类，在android下的实现为GraphicsLayerAndroid，该类包含一个LayerAndroid类，才是硬件加速用到的Layer。当然LayerAndroid也是一个基类，Video对应的是VideoLayerAndroid类。可以简单这样理解，一个Video标签在硬件加速部分对应于一个VideoLayerAndroid类，用于显示Video内容。 那么我们看看VideoLayerAndroid是怎么创建的，如下堆栈： #0?VideoLayerAndroid #1?MediaPlayerPrivate #2?MediaPlayerVideoPrivate #3?WebCore::MediaPlayerPrivate::create #4?WebCore::MediaPlayerPrivate::creat