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视频机制分析
horky
+关注
目录
打赏
0
0
0
0
18
分享
相关文章
HTML5 Video(视频)2
HTML5 `&lt;video&gt;` 标签及其相关属性和方法简介:支持 MP4、WebM 和 Ogg 视频格式。通过 JavaScript 控制播放、暂停、加载及设置属性如音量、尺寸等。示例展示了如何使用 `play()`、`pause()` 方法及 `paused`、`width` 属性创建基本的播放/暂停和调整尺寸控件。
HTML5 Video(视频)1
HTML5引入了&lt;video&gt;元素,为网页视频播放提供标准方法。它支持播放、暂停和音量控制,以及视频尺寸设置。主要浏览器如IE9+、Firefox、Opera、Chrome和Safari均支持此元素。&lt;video&gt;元素可通过多个&lt;source&gt;子元素链接不同格式的视频文件,以确保兼容性。当前支持的视频格式包括MP4、WebM和Ogg。
|
9月前
|
spring boot 整合 itextpdf 导出 PDF,写入大文本,写入HTML代码,分析当下导出PDF的几个工具
这篇文章介绍了如何在Spring Boot项目中整合iTextPDF库来导出PDF文件,包括写入大文本和HTML代码,并分析了几种常用的Java PDF导出工具。
1838 0
spring boot 整合 itextpdf 导出 PDF,写入大文本,写入HTML代码,分析当下导出PDF的几个工具
在HTML5中嵌入视频和音频
【10月更文挑战第5天】在HTML5中嵌入视频和音频。
111 3
HTML5 服务器发送事件(Server-Sent Events)详解
**服务器发送事件(Server-Sent Events, SSE)** 是一种用于构建单向实时通信的技术,允许服务器主动向客户端(通常是浏览器)推送更新。SSE 提供了一个简单的 API,非常适合实时应用,如新闻更新、天气变化、社交媒体通知等。SSE 基于 HTTP 协议,通过长连接实现数据传输。其主要优点包括简洁的 API、持久连接和自动重连功能。大多数现代浏览器都内置了对 SSE 的支持。通过简单的服务器端和客户端代码,可以轻松实现数据的实时推送和接收。
HTML5 Video(视频)作为背景的优化方案
使用 HTML5 `&lt;video&gt;` 标签作为网页背景视频可以提升视觉效果,但需优化以确保性能和用户体验。主要方法包括:选择合适的视频格式(MP4、WebM、Ogg)和分辨率(720p 或更低),压缩文件大小,确保视频静音和循环播放,使用 CSS 设置全屏样式,根据设备和网络条件加载视频或静态图像,使用 `playsinline` 属性和延迟加载技术提高性能,确保无障碍性,并监控页面加载时间。合理应用背景视频可增强网站视觉效果而不影响用户体验。
征信报告修改器,征信报告生成器,制作软件无痕修改软件【js+html+css】
本项目为信用评分模拟器教学工具,采用HTML5实现,仅供学习参考。核心功能通过JavaScript构建,包含虚拟数据生成、权重分配及信用因素分析(如还款记录、信用使用率等)。
抖音快手小红书虚拟评论截图生成器,模拟对话制作工具,html+js+css
这是一款纯前端实现的多平台虚拟评论生成器,支持抖音、快手、小红书风格,适用于产品演示与UI设计。采用Vanilla JS与Flexbox布局,利用IndexedDB存储数据,CSS Variables切换主题。
个人征信电子版无痕修改, 个人信用报告pdf修改,js+html+css即可实现【仅供学习用途】
本代码展示了一个信用知识学习系统的前端实现,包含评分计算、因素分析和建议生成功能。所有数据均为模拟生成
病历单生成器在线制作,病历单生成器app,HTML+CSS+JS恶搞工具
本项目为医疗病历模拟生成器,旨在为医学教学和软件开发测试提供数据支持,严格遵守《医疗机构病历管理规定》。

热门文章

最新文章