3612人阅读
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的):
转载请注明出处:
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：641288次
积分：8866
积分：8866
排名：第725名
原创：178篇
转载：29篇
译文：40篇
评论：280条
新浪微博:Horky
微信:horkychen
Mail:horky.
文章：51篇
阅读：94776
文章：35篇
阅读：166166
(5)(1)(4)(5)(1)(1)(4)(2)(6)(1)(2)(2)(4)(5)(4)(11)(11)(2)(5)(5)(4)(9)(2)(11)(7)(20)(34)(31)(9)(1)(6)(4)(1)(1)(2)(3)(8)(1)(1)(1)(1)(1)(3)(2)(1)(1)(1)(1)(2)(2)(1)使用audio元素的事件
本文所属图书&>&
现在开发人员可以在浏览器中创建出具有丰富交互功能的内容，并实现跨平台部署。 HTML5多媒体开发指南 一书对此进行了详细介绍。本书将介绍如何使用HTML5革命性的新特性，包括原生的&audio&、&video&和&canvas&...&&
6.3& 事件和audio元素
与video标记类似，audio标记可以触发很多事件。其中很多是标准事件，比如鼠标单击(click)、鼠标移动(mouse move)、获得焦点(focus)等事件。另外一些则是audio元素所特有的事件，包括播放(play)、暂停(pause)、音量改变(volume change)、播放完毕(ended)等等。
6.3.1& 使用audio元素的事件
作为使用audio元素事件的一个例子，程序清单6-4列出了一个使用了play、pause和 ended事件页面的源代码。对于页面中标识符为musicstaff的图片(即musicstaff.jgp)，当页面加载时，该图片将被设置为不可见(通过style=&visibility:&)。一旦播放器启动播放，就会触发play事件，调用JavaScript函数showpicture()将图片切换为可见。如果暂停播放，则会触发pause事件，调用另外一个JavaScript函数hidepicture()将图片切换回隐藏状态。最后，当歌曲播放完毕，将触发ended事件，显示一条Thanks for listening消息。通过设置用于显示该消息的div元素的innerHTML属性，就可以将该消息显示在页面上。
程序清单6-4& 使用audio元素的事件
&!doctype html&
&html lang=&en&&
&meta charset=&utf-8&&
&title&Audio&/title&
#audio1&{border-style:
border-color:#c3
border-width:15
background: url(gradient1.jpg);
function showpicture() {
document.getElementById(&musicstaff&).style.visibility=&visible&;
function hidepicture() {
document.getElementById(&musicstaff&).style.visibility=&hidden&;
function thanks() {
document.getElementById(&thanks&).innerHTML=
&&h2&Thanks for listening!&/h2&&;
&div style=&margin-left:40&&
&h1&Music Play with Events&/h1&
&div id=&thanks&&&/div&
&audio controls id=&audio1& onplay=&showpicture()&
onpause=&hidepicture()& onended=&thanks()&&
&source src=&song1.ogg& type=&audio/ogg& /&
&source src=&song1.oga& type=&audio/ogg& /&
&source src=&song1.mp3& type=&audio/mpeg& /&
&source src=&song1.wav& type=&audio/wav& /&
Your browser does not support the audio element
&img id=&musicstaff& src=&musicstaff.jpg& style=&visibility:&&
下面让我们来看一下具体的操作。图6-4显示了第一次在中加载该页面的情形。audio元素显示在页面上，但还没有单击播放按钮启动播放音频文件。页面中所能看到的，只有播放器。
当单击了播放控件，图片musicstaff.jgp将显示出来，如图6-5所示。
如果单击了暂停按钮，暂停播放歌曲，图片musicstaff.jgp将再次变为不可见。当取消暂停，继续播放歌曲，该图片将再次显示出来。每次切换audio元素的播放和暂停控件时，该图片的显示和隐藏状态也随之切换。最后，当歌曲播放结束时，将显示一条消息，如图6-6所示。
您对本文章有什么意见或着疑问吗？请到您的关注和建议是我们前行的参考和动力&&
您的浏览器不支持嵌入式框架，或者当前配置为不显示嵌入式框架。随笔- 146&
评论- 753&
　　日前在做一个视频播放的页面，其中用到了HTML5的Video对象，这个是HTML5中新增的一个对象，支持多种不同格式的视频在线播放，功能比较强大，而且还扩展了许多事件，可以通过JavaScript脚本来对视频播放进行控制。参考下面两个链接：
　　Video对象可以通过ontimeupdate事件来报告当前的播放进度，同时通过该事件还可以根据视频播放的情况来控制页面上的其它元素，例如随着视频播放的进度来切换章节、显示额外信息等。下面是一个例子：
&!DOCTYPE html&
&html xmlns="http://www.w3.org/1999/xhtml"&
&meta http-equiv="X-UA-Compatible" content="IE=Edge" /&
&title&&/title&
&script type="text/javascript"&
function timeUpdate() {
document.getElementById('time').innerHTML = video.currentT
function durationChange() {
document.getElementById('duration').innerHTML = video.
function seekVideo() {
document.getElementById('video').currentTime = document.getElementById('seekText').
window.onload = function () {
var videoPlayer = document.getElementById("video");
videoPlayer.ontimeupdate = function () { timeUpdate(); };
&video id="video" controls="controls"
poster="./images/videoground1.png"
src="./videoSource/video1.mp4" width="450px" height="320px"
ondurationchange="durationChange()" /&
&div&Time: &span id="time"&0&/span& of &span id="duration"&0&/span& seconds.&/div&
&input type="text" id="seekText" /&
&input type="button" id="seekBtn" value="Seek Video" onclick="seekVideo();" /&
　　当然你也可以像在页面上使用其它元素一样，给Video对象动态添加属性或者挂事件，如：
video.ontimeupdate = function () { getCurrentVideoPosition(); };
　　不过上面这行代码貌似在Chrome上无效，可以使用addEventListener来代替它：
videoPlayer.addEventListener("timeupdate", function () { getCurrentVideoPosition(); }, false);
　　不知道是什么原因在Chrome上不能直接将ontimeupdate事件挂在Video元素上，而必须通过addEventListener方法来添加事件。不过addEventListener也兼容IE和Firefox浏览器，所以应该是通过的。
阅读(...) 评论()所有回答(6)
好像看过这些html5标签 只支持IE9以上版本用&.cn/html5/html_5_intro.asp
浏览器支持
最新版本的 Safari、Chrome、Firefox 以及 Opera 支持某些 HTML5 特性。Internet Explorer 9 将支持某些 HTML5 特性。
IE8 要支持 video 标签，那么就去下载 video.js；要支持标准html5标签，就下载 html5.js；要支持excanvas，就下载&excanvas.js
目前非html5浏览器要支持html5标准，都只能通过这些额外的js或者css来实现。
园豆：1159
你好、、、我的IE8是可以显示的
刚才试了&videoJs的官网在ie8是可以用 在ie7下面也可以用的 只是样式不好看了而已
园豆：4021
园豆：4021
略叼，围观。
园豆：1469
IE就用flash播放器不
园豆：1467
&&&您需要以后才能回答，未注册用户请先。您的位置：
HTML5是什么？如何鉴定HTML5产品？
发布者: moke |
Html 5开始大热标志性的事件是Apple 前CEO Steve Jobs
公开炮轰Flash，并指出Flash在移动终端的不利因素，而且Html5将获得胜利。顿时it界，数字营销界，数字媒体界等相关领域的人开始一窝蜂的
议论，追捧，打击，HTML
5成了当仁不让的明星（就在不久前Adobe宣布停止对Mobile端flash的开发与更新）。但是很多人，都在问：HTML5是什么？如何鉴定
HTML5产品？
我们这次的《知识普及》栏目就来看看初步的探索下HTML5。
&一、什么是HTML，以及HTML 5
HTML是超文本标记语言的英文缩写，这是一种标记语言，不需要进行编译，直接由浏览器执行。
语言就必须有一个语法的规则，如果没有规则，谁知道应该把一个HTML元素以怎样的形式展现给用户呢？目前HTML语言的标准是由
W3C（World Wide Web
Consortium）负责制定的。依照规则，无论是何种浏览器，对于相同的HTML代码，应当展现给用户相同的效果。
目前HTML语言最新版本为4(HTML 4)，此外还有一个可扩展超文本标记语言（XHTML）作为其扩展版本，提供更为丰富的功能和更严谨的语法规范。
HTML 5草案的前身名为Web Applications
1.0。於2004年被WHATWG提出，於2007年被W3C接纳，并成立了新的HTML工作团队。日，W3C发布了最新的
HTML5工作草案，HTML工作组包括AOL、Apple、Google、IBM、
Microsoft、Mozilla、Nokia、Opera等数百个开发上。HTML5中增加了许多新特性，例如嵌入音频、视频和图片的函数、客户端存
储数据、交互式文档等，通过制定如何处理所有HTML元素以及如何从错误中恢复的精确规则，HTML5进一步增强了互动性，并有效减少了开发成本。&
二、HTML5 有哪些特质
我们来看看W3.org列举出来的8个Class技术描述：
A. 语义特性（Class：Semantic）
HTML5赋予网页更好的意义和结构。更加丰富的标签将随着对RDFa的，微数据与微格式等方面的支持，构建对程序、对用户都更有价值的数据驱动的Web。
B.&本地存储特性（Class:&OFFLINE & STORAGE）
基于HTML5开发的网页APP拥有更短的启动时间，更快的联网速度，这些全得益于HTML5 APP Cache，以及本地存储功能。Indexed DB（html5本地存储最重要的技术之一） 和API说明文档。
C. 设备兼容特性 (Class:&DEVICE ACCESS)
从Geolocation
功能的API文档公开以来，HTML5为网页应用开发者们提供了更多功能上的优化选择，带来了更多体验功能的优势。HTML5提供了前所未有的数据与应用
接入开放接口。使外部应用可以直接与浏览器内部的数据直接相连，例如视频影音可直接与microphones及摄像头相联
D. 连接特性（Class: CONNECTIVITY）
更有效的连接工作效率，使得基于页面的实时聊天，更快速的网页游戏体验，更优化的在线交流得到了实现。HTML5拥有更有效的服务器推送技
术，Server-Sent Event和WebSockets就是其中的两个特性，这两个特性能够帮助我们实现服务器将数据’推送’到客户端的功能。
E. 网页多媒体特性(Class: MULTIMEDIA)
支持网页端的Audio、Video等多媒体功能， 与网站自带的APPS，摄像头，影音功能相得益彰。
F. 三维、图形及特效特性（Class: 3D, Graphics & Effects）
基于SVG、Canvas、WebGL及CSS3的3D功能，用户会惊叹于在浏览器中，所呈现的惊人视觉效果。
G. 性能与集成特性（Class: Performance & Integration）
没有用户会永远等待你的Loading——HML5会通过XMLHttpRequest2等技术，帮助您的Web应用和网站在多样化的环境中更快速的工作。
H. CSS3特性(Class: CSS3)
在不牺牲性能和语义结构的前提下，CSS3中提供了更多的风格和更强的效果。此外，较之以前的Web排版，Web的开放字体格式（WOFF）也提供了更高的灵活性和控制性。
Apple 官方对HTML5的各个特性做了详细并且动态的展示：/html5/showcase&
三、Html 5与Html 4的区别
A.简化的语法
更简单的doctype声明是HTML5里众多新特征之一。现在你只需要写，这就行了。HTML5的语法兼容HTML4和XHTML1，但不兼容SGML。
B. 一个替代Flash的新”canvas”标记
对于Web用户来说，Flash既是一个惊喜，也是一种痛苦。有很多的Web开发人员对HTML5对Flash产生的威胁很不满。但对于那些忍受着要花几年时间加载和运行的臃肿的Flash视频的人来说，用新的 “canvas” 标记生成视频的技术已经到来。
目前， “canvas” 标记并不能提供所有的Flash具有的功能，但假以时日，Flash必将从web上淘汰。我们拭目以待，因为很多人还并不认同这种观点。&
C. 新的 “header” 和 “footer” 标记
HTML5的设计是要更好的描绘网站的解剖结构。这就是为什么这些”header” 和”footer” 等新标记的出现，它们是专门为标志网站的这些部分设计的。在开发网站时，你不在需要用”div”标记来标注网页的这些部分。
D. 新的 “section” 和 “article” 标记
跟”header” 和 “footer”标记类似，HTML5中引入的新的”section” 和 “article” 标记可以让开发人员更好的标注页面上的这些区域。据推测，除了让代码更有组织外，它也能改善SEO效果，能让搜索引擎更容易的分析你的页面。E.新的 “menu” 和 “figure” 标记
新的”menu”标记可以被用作普通的菜单，也可以用在工具条和右键菜单上，虽然这些东西在页面上并不常用。类似的，新的 “figure” 标记是一种更专业的管理页面上文字和图像的方式。当然，你可以用样式表来控制文字和图像，但使用HTML5内置的这个标记更适合。
F. 新的 “audio” 和 “video” 标记
新的”audio” 和 “video” 标记可能是HTML5中增加的最有用处的两个东西了。正如标记名称，它们是用来嵌入音频和视频文件的。
除此之外还有一些新的多媒体的标记和属性，例如”track”，它是用来提供跟踪视频的文字信息的。有了这些标记，HTML5使Web2.0特征变得越来越友好。问题在于，在HTML5还未被广泛的接受之前，Web2.0还是老的Web2.0。&
G. 全新的表单设计新的 “form” 和 “forminput” 标记对原有的表单元素进行的全新的修改，它们有很多的新属性(以及一些修改)。如果你经常的开发表单，你应该花时间更详细的研究一下。
H. 不再使用 “b” 和 “font” 标记
对我个人来说，这是一个让我不太理解的改动。我并不认为去除 “b” 和
“font”标记会带来多大的好处。我知道，官方的指导说这些标记可以通过CCS来做更好的处理，但这样一来，为了在文章一两个地方出现的这种标记，你就
需要在独立的css和文本两个地方来实现这一的功能，岂不笨拙。也许我们以后会习惯这种方法。&
i. 不再使用 “frame”, “center”, “big” 标记
事实上，我已经记不清曾经何时用过这些标记了，所以，我并不为去除这些标记感到悲哀。相同的原因，有更好的标记能实现它们的功能——这很好，任何作废的标记从标准中剔除都是受欢迎的。
四、早期试行者：
体验 HTML5 的最好浏览器是那些基于 Webkit 引擎的浏览器（Apple 开发的开源浏览器内核），如 Chrome 和
Safari，Firefox 不太流畅，即使现在Firefox
9官方声称完美支持HTML5，但是实际应用中，我们发现还是相对于Chrome和Safari欠缺许多。
W3C在2011年上半年正式推出了HTML5的初步标准，随之而来是谨慎的Mircosoft 发布了完美支持HTML5的IE9.
当然，介于目前浏览器市场玲琅满目，目前除了主流的浏览器的最新版本之外，之前的版本都在或多或少的拒绝HTML5。
五、其他Html 5开发相关站点：
PhoneGap是一个开源的、基于JavaScript语言、用于快速和简便开发手机应用程序的开发框架，用来构建跨平台的使用HTML，CSS
和JavaScript的移动应用程序。我们将会放出phoneGap的详细介绍。它是最普及的HTML5 to App的工具。
RUL: http://jsdo.it
JSDO.IT是一个js
代码分享的网站，强调社区参与和协作，它可以让程序员，开发者在站内分享自己写的程序代码和作品，也可以在站内相互交流，共享JS代码相关的内容，是通过
社交网络或社区为基础来建立的代码分享功能的网站。其界面流畅，带有自动更新的预览面板，可接受开源JS库。另外，它还有一个独特的性能，即可在智能手机
中打开浏览器查看的“智能手机预览”命令。这个工具需要用户注册并登陆才能使用。
HTML 5 Boilerplate 是一个HTML / CSS / js模板，是实现跨浏览器正常化、性能优化，稳定的可选功能如跨域Ajax和Flash的最佳实践。
此网站由业界众多专业资深前辈共同发起的一个开源开发模板站点，来帮助大家快速使用HTML5技术开发网站，同时兼容其他各种旧版本的浏览器浏览体
Boilerplate并不是一套框架，他仅仅是一套模板。大家可以把他当作自己的新项目模板，在此基础上建立自己的项目。这一网站志在建立一套简单的模
板帮助大家快速的进行开发，一般来说下载了这套模板后，便可以在其上进行修改，测试，查看兼容性浏览等。
本文地址：
文章标题：
最新分享资源
0102030405060708