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

原创 2012年08月11日 23:14:05

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

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


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

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

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

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

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

 

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

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

 

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

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

   4.8.10.7 Ready States

 

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

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

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


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

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

 

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

   https://github.com/HorkyChen/WebKit-Video-Documentation

 

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

转载请注明出处:http://blog.csdn.net/horkychen

 

HTML5播放器MediaElement.js用法

MediaElement是一款HTML5播放器, 官网:
  • WeLoveSunFlower
  • WeLoveSunFlower
  • 2014年08月08日 10:28
  • 7751

WebKit之video解析

HTML的每个元素都可以让JavaScript在某些事件发生时,进行处理。就比如onclick="clickButton()"之类的属性设定。 像下面这篇博客所讲的一样,在WebKi...
  • sauphy
  • sauphy
  • 2015年11月20日 00:48
  • 531

Web视频播放 之 【HTML5 Video标签】

一、说明HTML5中引入了video标签用于方便的在浏览器中播放视频,不在需要对flashPlayer进行依赖,更加轻量级。但在浏览器兼容、视频协议支持方面还有一些需要注意的问题。二、浏览器兼容 ...
  • malingshuma
  • malingshuma
  • 2016年08月06日 11:55
  • 1778

html中video视频播放

video播放时常见的问题。
  • qq_26445509
  • qq_26445509
  • 2016年08月30日 17:28
  • 791

HTML5 播放器心得与小结

随着 HTML5 的普及,越来越多视频网站使用 标签播放直播、点播内容(如下图所示)。使用 的好处,主要以下两点:可以直接在页面中播放,也就是所谓的“区域播放”,上半屏是视频播放,下半屏是其他内容...
  • zhangxin09
  • zhangxin09
  • 2015年04月20日 10:32
  • 16776

浅谈html5 video标签嵌入视频

前面谈到了网页怎么嵌入flash视频,就想到了另一个问题,flash格式视频在手机上播放,需要手机安装flash播放插件,而且flash视频绝对无法在苹果手机上播放,因为苹果对flash的不支持,导致...
  • sundasheng44
  • sundasheng44
  • 2015年05月18日 16:01
  • 10111

Video---HTML5 Video 实现浅析

HTML5 Video实现浅析 ——基于android4.1browser 1.     基本结构 先上一张基本结构图,图中展示了webkit中与HTML5 Video实现相关的一些类。...
  • IT1039871366
  • IT1039871366
  • 2015年06月16日 15:44
  • 900

浅谈html5网页内嵌视频(转)

如今在这个特殊的时代下:flash将死未死,微软和IE的历史问题,html5标准未定,苹果和谷歌的闭源和开源之争,移动互联网的大势所趋,浏览器各自为战…这些都导致web开发者在设计视频解决方案的时候相...
  • dragoo1
  • dragoo1
  • 2015年09月23日 15:25
  • 2076

Webkit中HTML5 Video的实现分析

基本结构及HTMLMediaElement & MediaPlayer 以下为针对Webkit中HTML5 Video实现原理的分析和学习总结。至于其中的UML图档,可以到下面的g...
  • bamboolsu
  • bamboolsu
  • 2015年02月06日 10:57
  • 828

Webkit中HTML5 Video的实现分析

转自 http://blog.csdn.net/horkychen/article/details/7855814 (一) - 基本结构及HTMLMediaElement & Medi...
  • ustcxiangchun
  • ustcxiangchun
  • 2013年09月13日 20:08
  • 5275
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Webkit中HTML5 Video的实现分析 (一) - 基本结构及HTMLMediaElement & MediaPlayer
举报原因:
原因补充:

(最多只允许输入30个字)