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

简介: MediaPlayerFactory MediaPlayerFactory像是一个解码库一样,初始化时,各个可用的播放器(MediaPlayerPrivate)向它注册。

MediaPlayerFactory

MediaPlayerFactory像是一个解码库一样,初始化时,各个可用的播放器(MediaPlayerPrivate)向它注册。当需要解码时,由它给出一个合适的播放器(呼叫MediaPlayerPrivate::constructor,MediaPlayerPrivate::create)创建一个实例[MediaPlayer:: loadWithNextMediaEngine执行])。所以MediaPlayerMediaPlayerPrivate应当是一对一的关系。

installedMediaEngines()会有一个静态的installed engines向量(Vector<MediaPlayerFactory*>),依据不同的OS,调用不同的MediaPlayerPrivateXXXregisterMediaEngine来注册新的Media Engine以支持不同的编码。如下图所示。

bestMediaEngineForTypeAndCodecs()在当视频的MIME type指定后,在MediaPlayer::loadWithNextMediaEngine中会调用它来获取合适的engine进行播放,否则直接使用nextMediaEngine()来获得播放有的engine.

详细的代码在MediaPlayer.cpp中。

 

以下是MediaPlayerPrivateQtsupportsType的代码片段:

MediaPlayer::SupportsType MediaPlayerPrivateQt::supportsType(const String& mime, const String& codec)
{
    if (!mime.startsWith("audio/") && !mime.startsWith("video/"))
        return MediaPlayer::IsNotSupported;
   ……
   if (QMediaPlayer::hasSupport(mime, codecListTrimmed) >= QtMultimediaKit::ProbablySupported)
        return MediaPlayer::IsSupported;

    return MediaPlayer::MayBeSupported;
}

 


RenderVideo的绘制操作

RenderVideo在绘制时重点是得出正确的大小。主要函数包括calculateInstrinicSize来得出大小,updatePlayer依据当前缩放比例计算出新的大小尺寸,paintReplaced则依据metric进行绘制操作(得出一个rect,再传给player)。

下面是可能会涉及元素更新的流程:

 

其核心函数是calculateIntrinsicSize(): (所谓Intrinsic Size来自于CSS规范).

当paintReplaced函数(因为RenderVideo继承自RenderReplaced)拿到Instrinic Size后会着手计算绘制区域以便进行绘制:

实际的绘制都会交由Media Player处理,而Media Player则交由它的m_private,也就是具体的播放器来处理。

这里有两个重点:

  1.如果视频指定了poster,则绘制poster仅在RenderVideo中就完成了,并不会交给MediaPlayer控件来处理。(RenderVideo本身也是继承自RenderImage,很容易处理图片的问题。)

  2. 绘制MediaPlayer时,注意图层的问题。这会影响到网页的外观,有些网页为了美观,会在视频外加一些修饰用的框,这些框会因为paddings或margins计算上的问题与视频重叠。这时Media Player所在图层不同,表现来的外观就不一样了。(乐视的午间道在HTML5 Video模式就有这个问题. Chrome中将UA改为iPad就可以看到.)

 

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

 

目录
相关文章
|
2月前
|
移动开发 前端开发 JavaScript
编程笔记 html5&css&js 005 网页上都有哪内容、形式和操作
编程笔记 html5&css&js 005 网页上都有哪内容、形式和操作
|
2月前
|
前端开发 JavaScript
Playwright系列(9):常见操作HTML 元素方式
Playwright系列(9):常见操作HTML 元素方式
196 0
|
2月前
|
前端开发 JavaScript
如何固定html表格头部,用css样式即可实现,操作简便、代码简单
如何固定html表格头部,用css样式即可实现,操作简便、代码简单
51 0
|
9月前
|
Web App开发 移动开发 JavaScript
【前端用法】HTML5 Video标签如何屏蔽右键视频另存为的js代码以及如何禁用浏览器控件,Video 禁止鼠标右键下载
【前端用法】HTML5 Video标签如何屏蔽右键视频另存为的js代码以及如何禁用浏览器控件,Video 禁止鼠标右键下载
241 0
|
23天前
|
前端开发 搜索推荐 UED
HTML表单提交的几种常用方式及其优缺点分析
HTML表单提交的几种常用方式及其优缺点分析
|
2月前
|
移动开发 JavaScript 前端开发
APP的HTML5页面经过运营商网络被植入手机管家问题及分析,解决方案见新文章
APP的HTML5页面经过运营商网络被植入手机管家问题及分析,解决方案见新文章
32 0
|
2月前
|
前端开发 JavaScript Java
java使用jodd操作html
java使用jodd操作html
42 2
|
2月前
|
JavaScript 前端开发
JavaScript DOM 操作:如何选中一个 HTML 元素?有哪些方法?
在JavaScript中,有五种主要方法选取HTML元素:1) `getElementById` 通过id选取单个元素;2) `getElementsByClassName` 选取具有特定类名的所有元素;3) `getElementsByTagName` 选取特定标签的所有元素;4) `querySelector` 使用CSS选择器选取单个元素;5) `querySelectorAll` 选取匹配CSS选择器的所有元素。这些方法结合使用可精确地定位到DOM树中的目标元素。
86 1
|
2月前
|
数据采集 存储 JavaScript
PHP爬虫技术:利用simple_html_dom库分析汽车之家电动车参数
本文旨在介绍如何利用PHP中的simple_html_dom库结合爬虫代理IP技术来高效采集和分析汽车之家网站的电动车参数。通过实际示例和详细说明,读者将了解如何实现数据分析和爬虫技术的结合应用,从而更好地理解和应用相关技术。
PHP爬虫技术:利用simple_html_dom库分析汽车之家电动车参数
|
2月前
|
JavaScript 前端开发 容器
JavaScriptDOM操作:如何创建一个新的HTML元素并将其添加到页面中?
JavaScriptDOM操作:如何创建一个新的HTML元素并将其添加到页面中?
201 1