Webkit中HTML5 Video的实现分析 (一) - 基本结构及HTMLMediaElement & MediaPlayer

痛定思痛。 2022-06-05 04:20 205阅读 0赞

以下为针对Webkit中HTML5 Video实现原理的分析和学习总结。至于其中的UML图档，可以到下面的github链接中下载。

首先预览一下Webkit中和Video相关的主要的类的层次结构:

![1344785706_2085.png][]

其中主要的类为HTMLMediaElement, MediaPlayer以及RenderVideo(左下角).

**HTMLMediaElement**代表了DOM结点，其继承关系可以追溯到Node,也就是DOM的结点。网页中Video/Audio元件的解析就是由它的创建开始。JavaScript的视频操作API也是以它为对象的。

**MediaPlayer**代表了媒体文件的播放器功能。它起得是一个桥接(bridge mode)的功能，具体的实现交由继承自MediaPlayerPrivateInterface的类来完成。也就是说，真正实现一个播放控制是由MediaPlayerPrivate来完成的。扩展播放器也要从这部分入手。

**RenderMedia**和**RenderVideo**代表的是浏览器生成的渲染树中的结点,负责处理绘制相关的工作(如位置、大小及重绘等)。它们的继承关系可以追溯到RenderObject，其中还有一个层次是RenderReplaced，这里有一个Replaced Element(可替换组件)的概念，查一下HTML的资料就可以了。

真正要展现它们的类图，其层次是非常多的。所以只是按需展开就可以了。

根据学习的原则，我们需要逐个突破。我们先来考察一下HTMLMediaElement和MediaPlayer的互动关系。

首先，我们要从HTMLMediaElement对视频播放涉及的状态有个基本了解，下面是个简要的播放状态图:

![1344697115_3126.png][]

HTMLMediaElement还定了一个ReadyState来表示数据状态:

![1344697212_4758.png][]

它提供setReadyState方法供MediaPlayerPrivate等调用来改变相应的状态。有关Ready States可以参考:

[4.8.10.7 Ready States][]

当创建一个HTMLMediaElement元件后，在解析节点属性时会调用parseAttribute方法:

![1344697376_9883.png][]

上图乱码是因去除Visual Paradigm的浮水印产生乱码，中文是"加载相应的音频或视频"。这里调用scheduleLoad就会触发Webkit创建一个播放器了。也就是MediaPlayer的创建。但MediaPlayer的创建的时机很多，因为页面有多种方式可以新添加一个video标签或者src标签，又或者页面的取消加载后的恢复等多种情况。下面就列出可能调用MediaPlayer::Create的情况:

![1344697687_3351.png][]

对应的，下面释放MediaPlayer的时机:

![1344954083_4373.png][]

MediaPlayer会调用MediaPlayerPrivate析构释放已创建的播放器。

而播放触发的条件也比较多，可以是指autoplay属性的视频，也可以是JavaScript执行了play()(load指令有些不同)等。如下图所示:

![1344698502_8157.png][]

其中UML使用Visual Paradigm绘制，可以到下面的GitHub下载:

[https://github.com/HorkyChen/WebKit-Video-Documentation][https_github.com_HorkyChen_WebKit-Video-Documentation]

下一篇:[Webkit中HTML5 Video的实现分析 (二) - MediaPlayerFactory & RenderVideo的绘制操作][Webkit_HTML5 Video_ _ - MediaPlayerFactory _ RenderVideo]

转载请注明出处:[http://blog.csdn.net/horkychen][http_blog.csdn.net_horkychen]

[1344785706_2085.png]: https://img-my.csdn.net/uploads/201208/12/1344785706_2085.png
[1344697115_3126.png]: https://img-my.csdn.net/uploads/201208/11/1344697115_3126.png
[1344697212_4758.png]: https://img-my.csdn.net/uploads/201208/11/1344697212_4758.png
[4.8.10.7 Ready States]: http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#ready-states
[1344697376_9883.png]: https://img-my.csdn.net/uploads/201208/11/1344697376_9883.png
[1344697687_3351.png]: https://img-my.csdn.net/uploads/201208/11/1344697687_3351.png
[1344954083_4373.png]: https://img-my.csdn.net/uploads/201208/14/1344954083_4373.png
[1344698502_8157.png]: https://img-my.csdn.net/uploads/201208/11/1344698502_8157.png
[https_github.com_HorkyChen_WebKit-Video-Documentation]: https://github.com/HorkyChen/WebKit-Video-Documentation
[Webkit_HTML5 Video_ _ - MediaPlayerFactory _ RenderVideo]: http://blog.csdn.net/horkychen/article/details/7862440
[http_blog.csdn.net_horkychen]: http://blog.csdn.net/horkychen