H5学习

video:

autoplay:如果出现该属性,则视频在就绪后马上播放。

controls: 如果出现该属性,则向用户显示控件,比如播放按钮。

height:设置视频播放器的高度。

loop: 如果出现该属性,则当媒介文件完成播放后再次开始播放。

preload:如果出现该属性,则视频在页面加载时进行加载,并预备播放。如果使用 "autoplay",则忽略该属性。

src:要播放的视频的 URL。

width:设置视频播放器的宽度。

HTML 5 拖放

设置元素为可拖放:
拖动什么 - 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 应用可进行缓存,并可在没有因特网连接时进行访问。

如需启用应用程序缓存,请在文档的 标签中包含 manifest 属性:

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(当错误发生)

你可能感兴趣的:(H5学习)