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

 

目录
相关文章
|
5月前
|
移动开发 前端开发 JavaScript
编程笔记 html5&css&js 005 网页上都有哪内容、形式和操作
编程笔记 html5&css&js 005 网页上都有哪内容、形式和操作
|
5月前
|
前端开发 JavaScript
Playwright系列(9):常见操作HTML 元素方式
Playwright系列(9):常见操作HTML 元素方式
300 0
|
5月前
|
前端开发 JavaScript
如何固定html表格头部,用css样式即可实现,操作简便、代码简单
如何固定html表格头部,用css样式即可实现,操作简便、代码简单
66 0
|
Web App开发 移动开发 JavaScript
【前端用法】HTML5 Video标签如何屏蔽右键视频另存为的js代码以及如何禁用浏览器控件,Video 禁止鼠标右键下载
【前端用法】HTML5 Video标签如何屏蔽右键视频另存为的js代码以及如何禁用浏览器控件,Video 禁止鼠标右键下载
324 0
|
9天前
|
Java BI API
spring boot 整合 itextpdf 导出 PDF,写入大文本,写入HTML代码,分析当下导出PDF的几个工具
这篇文章介绍了如何在Spring Boot项目中整合iTextPDF库来导出PDF文件,包括写入大文本和HTML代码,并分析了几种常用的Java PDF导出工具。
97 0
spring boot 整合 itextpdf 导出 PDF,写入大文本,写入HTML代码,分析当下导出PDF的几个工具
|
27天前
|
移动开发 编解码 监控
HTML5 Video(视频)作为背景的优化方案
使用 HTML5 `&lt;video&gt;` 标签作为网页背景视频可以提升视觉效果,但需优化以确保性能和用户体验。主要方法包括:选择合适的视频格式(MP4、WebM、Ogg)和分辨率(720p 或更低),压缩文件大小,确保视频静音和循环播放,使用 CSS 设置全屏样式,根据设备和网络条件加载视频或静态图像,使用 `playsinline` 属性和延迟加载技术提高性能,确保无障碍性,并监控页面加载时间。合理应用背景视频可增强网站视觉效果而不影响用户体验。
|
1月前
|
移动开发 开发者 UED
HTML5中video标签controlslist属性的使用方法
`controlsList`属性为开发者提供了更多控制HTML5视频播放器行为的能力,让视频内容的集成更加灵活和符合需求。通过精心设计的控制列表,可以提升用户体验,同时保持内容的安全性和专业性。这种细节的控制和定制能力是现代Web开发的一个重要方面,反映了HTML5对开发者和内容创作者需求的响应。
110 1
|
1月前
|
移动开发 JavaScript 前端开发
html5 video
本文介绍了HTML5中的`<video>`标签的用法,包括如何设置视频的属性如自动播放、循环播放、加载模式,以及如何通过JavaScript控制视频播放和暂停,还提到了支持的视频格式和`<video>`标签中`<source>`元素的作用。
32 0
html5 video
|
3月前
|
前端开发 搜索推荐 UED
HTML表单提交的几种常用方式及其优缺点分析
HTML表单提交的几种常用方式及其优缺点分析
|
5月前
|
前端开发 JavaScript Java
java使用jodd操作html
java使用jodd操作html
63 2