WebKit之video解析

转载 2015年11月20日 00:48:05
HTML的每个元素都可以让JavaScript在某些事件发生时,进行处理。就比如onclick="clickButton()"之类的属性设定。

像下面这篇博客所讲的一样,在WebKit中每个元素都有其对应的JS绑定的实现:
[WebKit]为JavaScript Binding添加新DOM对象的三种方式及实作

对于视频元素,可以对应看看JSHTMLMediaElement.cpp和JSHTMLVideoElement.cpp中的实现。

这里只说一下事件的处理机制。就是在WebKit中有事件发生时,如何调用JavaScript对应的处理函数。

视频元素除了一般的HTML DOM Node的事件外,还有一些特定的事件,比如played, paused, ended等。这些在JSHTMLMediaElement.cpp中都可以看到:
static const HashTableValue JSHTMLMediaElementTableValues[] =
{
    { "error", DontDelete | ReadOnly, (intptr_t)static_cast<PropertySlot::GetValueFunc>(jsHTMLMediaElementError), (intptr_t)0, NoIntrinsic },
     { "played", DontDelete | ReadOnly, (intptr_t)static_cast<PropertySlot::GetValueFunc>(jsHTMLMediaElementPlayed), (intptr_t)0, NoIntrinsic },
    { "seekable", DontDelete | ReadOnly, (intptr_t)static_cast<PropertySlot::GetValueFunc>(jsHTMLMediaElementSeekable), (intptr_t)0, NoIntrinsic },
    { "ended", DontDelete | ReadOnly, (intptr_t)static_cast<PropertySlot::GetValueFunc>(jsHTMLMediaElementEnded), (intptr_t)0, NoIntrinsic },
...


还记得WebKit如何解析视频的属性吗? 可以看看这里:
Webkit中HTML5 Video的实现分析 (一) - 基本结构及HTMLMediaElement & MediaPlayer

同样是在HTMLMediaElement::parseAttribute函数中,有如下的代码段:
        ......
    else if (attrName == onabortAttr)
        setAttributeEventListener(eventNames().abortEvent, createAttributeEventListener(this, attr));
    else if (attrName == onbeforeloadAttr)
        setAttributeEventListener(eventNames().beforeloadEvent, createAttributeEventListener(this, attr));

setAttributeEventListener()的就是将新指定的事件处理函数通过EventTarget::addEventListener()加入到EventTarget对象内部的hash表中(EventListenerMap)。它的第二个参数就是一个EventListener,负责最终执行这个事件处理函数。

当需要触发某个事件时,使用如下方式调用:
if (m_networkState == NETWORK_LOADING || m_networkState == NETWORK_IDLE)
        scheduleEvent(eventNames().abortEvent);
上面的代码表示如果条件成立,将触发一个abort事件给JavaScript。

scheduleEvent主要是创建一个EventTarget对象加到所谓的GenericEventQueue的队列中,以异步的方式执行。 在执行时(GenericEventQueue::timerFired())再交由EventTarget来执行。最终会检查已注册的事件处理函数,对应执行JavaScript函数。

下面是比较完整的时序图供参考 (注意HTMLMediaElement的继承关系回到Node时,你会现HTMLMediaElement也是继承自EventTarget的):


Webkit中HTML5 Video的实现分析

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

HTML5的Video标签的属性,方法和事件汇总及Video填充满父div的大小

标签的属性 src :视频的属性poster:视频封面,没有播放时显示的图片preload:预加载autoplay:自动播放loop:循环播放controls:浏览器自带的控制条width:视频宽...
  • a460550542
  • a460550542
  • 2016年09月28日 13:57
  • 9589

Webkit中HTML5 Video的实现分析

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

使用video的那些坑

2,video标签api中的加载事件支持不太好:在现代浏览器中应该使用监听事件或者jq封装的on事件。而不是用onclick=function(){}这样的样式 videoEle.addEven...
  • github_37195944
  • github_37195944
  • 2016年12月28日 20:58
  • 897

Webkit中HTML5 Video的实现分析

转自 http://blog.csdn.net/horkychen/article/details/7855814 (一) - 基本结构及HTMLMediaElement & Medi...
  • ustcxiangchun
  • ustcxiangchun
  • 2013年09月13日 20:08
  • 5274

Webkit之video事件流程分析

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

WebKit和Chrome源码分析

WebKit内核源代码分析 http://blog.sina.com.cn/s/blog_53220cef0100ta1i.html 摘要:本系列通过分析WebKit的源代码,试图分析WebK...
  • bcbobo21cn
  • bcbobo21cn
  • 2016年05月24日 13:13
  • 1221

浏览器: webkit架构 目录结构

一, webkit架构    webkit的一个显著特点, 支持不同的浏览器, 一部分相同, 一部分不同, 不同的部分称为webkit的移植(ports)。        webkit 嵌入式接口...
  • bamboolsu
  • bamboolsu
  • 2015年04月14日 22:27
  • 768

video.js在IE8下无法正常播放

使用video.js插件在PC端播放视频,官方说可以兼容IE8,但是下载DEMO下来后在本地测试,发现IE 8不能播放。后来搜索资料发现了video.js兼容版本。这个应该是国内的在video.js基...
  • wanglufei_1992
  • wanglufei_1992
  • 2016年06月16日 11:26
  • 6038

webkit技术浅析系列---DNS

前言:对于web开发者而言,特别是使用HTML5技术来编写网页或者web应用,了解其背后的工作原理是写出高效代码的有效捷径,结合最近在看的webkit以及chromium,感触颇深,希望能够通过web...
  • qq_26708777
  • qq_26708777
  • 2017年03月20日 01:59
  • 484
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:WebKit之video解析
举报原因:
原因补充:

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