HTML5和JS.docx

HTML5视频和音频元素属性属性值描述autoplayautoplay如果出现该属性，则视频在就绪后马上播放。controlscontrols如果出现该属性，则向用户显示控件，比如播放按钮。heightpixels设置视频播放器的高度。looploop如果出现该属性，则当媒介文件完成播放后再次开始播放。preloadpreload如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 autoplay，则忽略该属性。srcurl要播放的视频的 URL。widthpixels设置视频播放器的宽度。 元素属性属性值描述autoplayautoplay如果出现该属性，则音频在就绪后马上播放。controlscontrols如果出现该属性，则向用户显示控件，比如播放按钮。looploop如果出现该属性，则每当音频结束时重新开始播放。preloadpreload如果出现该属性，则音频在页面加载时进行加载，并预备播放。如果使用 autoplay，则忽略该属性。srcurl要播放的音频的 URL。视频格式当前，video 元素支持三种视频格式：格式IEFirefoxOperaChromeSafariOggNo3.5+10.5+5.0+NoMPEG 4NoNoNo5.0+3.0+WebMNoNo10.6+6.0+No音频格式当前，audio 元素支持三种音频格式：IE 8Firefox 3.5Opera 10.5Chrome 3.0Safari 3.0Ogg VorbisMP3Wav媒介事件由视频、图像以及音频等媒介触发的事件。适用于所有 HTML 5 元素，不过在媒介元素（诸如 audio、embed、img、object 以及 video）中最常用：属性描述onabort当发生中指事件时运行脚本oncanplay当媒介能够开始播放但可能因缓冲而需要停止时运行脚本oncanplaythrough当媒介能够无需因缓冲而停止即可播放至结尾时运行脚本ondurationchange当媒介长度改变时运行脚本onemptied当媒介资源元素突然为空时（网络错误、加载错误等）运行脚本onended当媒介已抵达结尾时运行脚本onerror当在元素加载期间发生错误时运行脚本onloadeddata当加载媒介数据时运行脚本onloadedmetadata当媒介元素的持续时间以及其他媒介数据已加载时运行脚本onloadstart当浏览器开始加载媒介数据时运行脚本onpause当媒介数据暂停时运行脚本onplay当媒介数据将要开始播放时运行脚本onplaying当媒介数据已开始播放时运行脚本onprogress当浏览器正在取媒介数据时运行脚本onratechange当媒介数据的播放速率改变时运行脚本onreadystatechange当就绪状态（ready-state）改变时运行脚本onseeked当媒介元素的定位属性 1 不再为真且定位已结束时运行脚本onseeking当媒介元素的定位属性为真且定位已开始时运行脚本onstalled当取回媒介数据过程中（延迟）存在错误时运行脚本onsuspend当浏览器已在取媒介数据但在取回整个媒介文件之前停止时运行脚本ontimeupdate当媒介改变其播放位置时运行脚本onvolumechange当媒介改变音量亦或当音量被设置为静音时运行脚本onwaiting当媒介已停止播放但打算继续播放时运行脚本应用场景：/examples/ch04/custom-controls.html/patrickl/articles/introduction-html5-video/video-canvas//patrickl/articles/introduction-html5-video/transitions/画布canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成：var c=document.getElementById(myCanvas);var cxt=c.getContext(2d);cxt.fillStyle=#FF0000;cxt.fillRect(0,0,150,75);JavaScript 使用 id 来寻找 canvas 元素：var c=document.getElementById(myCanvas);然后，创建 context 对象：var cxt=c.getContext(2d); getContext(2d) 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。应用场景：/projects/harmony/#chrome//examples/ch05/animate2.html拖拽应用场景：/examples/ch08/simple.html/study/201102/html5-drag-and-drop.html未来的优势HTML5 可能对移动 Web 带来更多好处，原因是，现在的移动 Web，iPhone 占主导地位，而 iPHone 是不支持 Flash 的。HTML5 还会让其它平台的移动浏览器有更快的网页加载速度。另一个好处是 SEO，Google宣布，将页面加载速度作为搜索排名的一个因素，因此，基于 HTML5 的页面也会因加载速度更快而受益。JavascriptServer端支持所有JavaScript，但是Client端完全不执行任何JS脚本，因此很多效果和交互都无法实现。1. AJAX部分支持，例如gmail等，但是没有了异步自动刷新等功能。不支持：输入框联想，注册码校验等。的输入框，许多注册页面的用户名检查等。地图查询等。，google地图等。页面定时更新。大部分邮箱的自动接收邮件，google财经等的动态刷新等。不支持的根本原因：不支持键盘事件：onkeypress，onkeydown等；不支持除了点击之外的鼠标事件：onmousemove，onmouseover，onmouseout等；不支持控件获得与失去焦点事件：onfocus，onblur等；不支持页面加载完成之后的定时刷新和延迟功能：在页面装载完成之后，所有onTimer，delay等与时间相关的操作都会停止，Client端也不支持动态刷新。2. 幻灯片sina等网站的幻灯片。3. 动态下拉列表输入法等。这些看起来是select的控件实际上是由JS来控制的。4. 根据鼠标放置的位置显示不同的内容左边的教育，培训等广告，顶部的图片变化等。这些是不支持onmouseover，onmouseout等事件。5. 页面滚动与定时刷新 许多网页都存在。不支持页面加载完成