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

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

像下面这篇博客所讲的一样,在WebKit中每个元素都有其对应的JS绑定的实现:

对于视频元素,可以对应看看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如何解析视频的属性吗? 可以看看这里:

同样是在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的):



转载请注明出处: http://blog.csdn.net/horkychen
下一篇:  Webkit中HTML5 Video的实现分析 (六) - Safari视频机制分析
目录
相关文章
|
8月前
|
Web App开发 移动开发 JavaScript
【前端用法】HTML5 Video标签如何屏蔽右键视频另存为的js代码以及如何禁用浏览器控件,Video 禁止鼠标右键下载
【前端用法】HTML5 Video标签如何屏蔽右键视频另存为的js代码以及如何禁用浏览器控件,Video 禁止鼠标右键下载
217 0
|
25天前
|
移动开发 HTML5
详解 HTML5 服务器发送事件(Server-Sent Events)
详解 HTML5 服务器发送事件(Server-Sent Events)
25 0
|
1月前
|
移动开发 前端开发 JavaScript
如何实时准确地从HTML5视频中截取当前播放画面
如何实时准确地从HTML5视频中截取当前播放画面
66 4
|
1月前
|
移动开发 JavaScript 前端开发
APP的HTML5页面经过运营商网络被植入手机管家问题及分析,解决方案见新文章
APP的HTML5页面经过运营商网络被植入手机管家问题及分析,解决方案见新文章
28 0
|
1月前
|
移动开发 搜索推荐 JavaScript
【专栏:HTML 进阶篇】HTML5 新特性探索:视频、音频与画布
【4月更文挑战第30天】HTML5的视频、音频和画布元素为网页开发注入新活力。视频和音频元素提供跨平台兼容的播放体验,支持自适应和交互控制;画布则允许动态图形和动画创作。在线视频网站、音乐播放器和游戏开发广泛应用这些特性。尽管面临版权和性能挑战,HTML5持续发展,为网页创新带来更多可能。拥抱这些新特性,创造更丰富的网页世界!
|
1月前
|
数据采集 存储 JavaScript
PHP爬虫技术:利用simple_html_dom库分析汽车之家电动车参数
本文旨在介绍如何利用PHP中的simple_html_dom库结合爬虫代理IP技术来高效采集和分析汽车之家网站的电动车参数。通过实际示例和详细说明,读者将了解如何实现数据分析和爬虫技术的结合应用,从而更好地理解和应用相关技术。
PHP爬虫技术:利用simple_html_dom库分析汽车之家电动车参数
|
1月前
|
Web App开发 前端开发 安全
编程笔记 html5&css&js 031 HTML视频
编程笔记 html5&css&js 031 HTML视频
|
1月前
|
数据采集 数据安全/隐私保护
高效网络采集实践:使用 Haskell 和 html-conduit 下载 www.baidu.com 视频完整教程
网络采集在当今信息时代中发挥着关键作用,用于从互联网上获取数据并进行分析。本文将介绍如何使用 Haskell 进行网络编程,从数据采集到图片分析,为你提供一个清晰的指南。我们将探讨如何使用爬虫代理来确保高效、可靠的数据获取,并使用 Haskell 的强大功能来分析和处理数据。
384 1
|
1月前
|
前端开发
HTML图片音频视频标签、超链接标签、列表标签和布局标签示例
HTML图片音频视频标签、超链接标签、列表标签和布局标签示例
57 0
|
7月前
uniapp使用weiview引入本地Html5+ video 基于mui 5+的 视频播放器
uniapp使用weiview引入本地Html5+ video 基于mui 5+的 视频播放器