video:
autoplay:如果出现该属性,则视频在就绪后马上播放。
controls: 如果出现该属性,则向用户显示控件,比如播放按钮。
height:设置视频播放器的高度。
loop: 如果出现该属性,则当媒介文件完成播放后再次开始播放。
preload:如果出现该属性,则视频在页面加载时进行加载,并预备播放。如果使用 "autoplay",则忽略该属性。
src:要播放的视频的 URL。
width:设置视频播放器的宽度。
HTML 5 拖放
设置元素为可拖放:<img draggable="true" />
拖动什么 - ondragstart 和 setData(),把被拖动的元素id保存到事件中:
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}
放到何处 - ondragover,如果需要设置允许放置,我们必须阻止对元素的默认处理方式,默认无法放置:
function allowDrop(ev)
{
ev.preventDefault();
}
进行放置 - ondrop,阻止默认事件,获得被拖动的对象ID,根据ID获得对象添加到目的区域:
function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
HTML 5 应用程序缓存
HTML5 引入了应用程序缓存,这意味着 web 应用可进行缓存,并可在没有因特网连接时进行访问。
如需启用应用程序缓存,请在文档的 <html> 标签中包含 manifest 属性:
<!DOCTYPE HTML><html manifest="demo.appcache"></html>
manifest 文件是简单的文本文件,它告知浏览器被缓存的内容(以及不缓存的内容)。
manifest 文件可分为三个部分:
- CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存(必需的):
-
CACHE MANIFEST /theme.css /logo.gif /main.js
- NETWORK - 在此标题下列出的文件需要与服务器的连接,且不会被缓存,可以用星号来指示所有其他资源
-
NETWORK: login.asp
- FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面(比如 404 页面)
-
FALLBACK: /html5/ /404.html 更新缓存的方法:
- 1,用户清空浏览器缓存
- 2,manifest 文件被修改
- 3,由程序来更新应用缓存
完整的 Manifest 文件
CACHE MANIFEST # 2012-02-21 v1.0.0 /theme.css /logo.gif /main.js NETWORK: login.asp FALLBACK: /html5/ /404.html
更新注释行中的日期和版本号是一种使浏览器重新缓存文件的办法。
HTML 5 Web Workers
web worker 是运行在后台的 JavaScript,不会影响页面的性能
web worker 是运行在后台的 JavaScript,独立于其他脚本,不会影响页面的性能。您可以继续做任何愿意做的事情:点击、选取内容等等,而此时 web worker 在后台运行。
检测 Web Worker 支持:typeof(Worker)!=="undefined"
创建 web worker 文件:
在外部创建xxx.js文件(实例为计数脚本, postMessage() 方法 用于向 HTML 页面传回一段消息)
var i=0;
function timedCount()
{
i=i+1;
postMessage(i);
setTimeout("timedCount()",500);
}
timedCount();
创建 Web Worker 对象:
new Worker它会创建一个新的 web worker 对象
if(typeof(w)=="undefined") { w=new Worker("demo_workers.js"); } "onmessage" 事件监听器: w.onmessage=function(event){ document.getElementById("result").innerHTML=event.data; };
终止 Web Worker
w.terminate();
HTML 5 服务器发送事件
接收 Server-Sent 事件通知
创建EventSource对象:var source = new EventSource("xxx");
判断浏览器是否支持:typeof(EventSource)!=="undefined";
监听消息:source.onmessage=function(event){};
服务器端代码:把 "Content-Type" 报头设置为 "text/event-stream"
EventSource对象事件:onopen(当通往服务器的连接被打开), onmessage(当接收到消息), onerror(当错误发生)