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

MediaPlayerFactory

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

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

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

详细的代码在MediaPlayer.cpp中。

 

以下是MediaPlayerPrivateQt的supportsType的代码片段:

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

 

时间: 2024-09-17 21:56:58

Webkit中HTML5 Video的实现分析 (二) - MediaPlayerFactory &amp; RenderVideo的绘制操作的相关文章

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

以下为针对Webkit中HTML5 Video实现原理的分析和学习总结.至于其中的UML图档,可以到下面的github链接中下载. 首先预览一下Webkit中和Video相关的主要的类的层次结构: 其中主要的类为HTMLMediaElement, MediaPlayer以及RenderVideo(左下角). HTMLMediaElement代表了DOM结点,其继承关系可以追溯到Node,也就是DOM的结点.网页中Video/Audio元件的解析就是由它的创建开始.JavaScript的视频操作A

Webkit中HTML5 Video的实现分析 (三) - MediaPlayer &amp;amp; MediaPlayerPrivate的生命周期

明确主要类的生命周期有助于更好理解Webkit中视频的工作流程.下图展示了类间的引用关系. 如HTMLVideoElement与一个MediaPlayer对应,MediaPlayer与MediaPlayerPrivate一一对应,它们都是一个组合关系,当所有者自身被析构时,会自动释放引用的实例.这个过程都是使用OwnPtr智能指针来实现的.   OwnPtr赋值操作的代码:        OwnPtr& operator=(std::nullptr_t) { clear(); return *t

Webkit中HTML5 Video的实现分析 (四) - 视频加载及播放的时序图

MediaPlayer同MediaPlayerPrivateInterface,再同播放控件的交互过程应当要简单.清晰.MediaPlayer通过自身的状态(Network States 和 Ready States)来控制操作的步骤.MediaPlayerPrivateInterface具体到不同的平台和视频格式,使用的具体的播放控件会不同. 这里仅贴一张时序图,其中没有特别区分HTMLVideoElement,使用的播放控件是Webkit默认的QuickTime组件.在调试时,最好要将UA调

Webkit中HTML5 Video的实现分析(六) - Safari视频机制分析

Safari中的视频相关操作封装在QuickTime Plugin里面,存放于/Library/Internet Plugin目录下.   下图是相关类的class diagram: 其中的QuickTime Plugin是通过已淘汰的Apple之前定义的Webkit Plugin协议来实现的,而不是现在支持的Netscape API的机制. 可以参考以下文档:        Introduction to WebKit Plugin Programming Topic           We

Webkit中HTML5 Video的实现分析(五) - WebKit中视频事件的传递

HTML的每个元素都可以让JavaScript在某些事件发生时,进行处理.就比如onclick="clickButton()"之类的属性设定. 像下面这篇博客所讲的一样,在WebKit中每个元素都有其对应的JS绑定的实现: [WebKit]为JavaScript Binding添加新DOM对象的三种方式及实作 对于视频元素,可以对应看看JSHTMLMediaElement.cpp和JSHTMLVideoElement.cpp中的实现. 这里只说一下事件的处理机制.就是在WebKit中有

Oracle中的PGA监控报警分析二(r12笔记第87天)

今天又收到了一条报警的信息,看起来很常规,但是后面的故事如果你做了分析就会发现其实本身并不平常,我觉得我得出手了. ZABBIX-监控系统: ------------------------------------报警内容: PGA Alarm on alltest ------------------------------------报警级别: PROBLEM ------------------------------------监控项目: PGA:9723.2 -------------

HTML5 video标签(播放器)学习笔记(二):播放控制

HTML5 video标签(播放器)学习笔记(二):播放控制 本文的目录: 1.获取影片总时长 2.播放.暂停 3.获取影片已播放时间和设置播放点 4.音量的获取和设置 第一.获取影片总时长 对播放器(video)操作,首先要得到的是影片的一些信息,其中一个就是总时长,除了内容以为,总时长也是第一时间要显示的.在对video进行操作的的前先给video标签添加一个ID,这样方便我们获取video元素 代码如下: <video id="myVideo" controls prelo

js检测浏览器是否支持html5中的video标签的方法

 这篇文章主要介绍了使用js检测浏览器是否支持html5中的video标签的方法,需要的朋友可以参考下 代码如下: //检测是否支持HTML5 function checkVideo() {     if (!!document.createElement('video').canPlayType) {         var vidTest = document.createElement("video");         oggTest = vidTest.canPlayType

使用js检测浏览器是否支持html5中的video标签的方法_javascript技巧

复制代码 代码如下: //检测是否支持HTML5function checkVideo() {    if (!!document.createElement('video').canPlayType) {        var vidTest = document.createElement("video");        oggTest = vidTest.canPlayType('video/ogg; codecs="theora, vorbis"');