H5学习

最新推荐文章于 2022-10-09 16:48:55 发布

somelittlelove

最新推荐文章于 2022-10-09 16:48:55 发布

阅读量420

点赞数 1

文章标签： HTML5

本文链接：https://blog.csdn.net/somelittlelove/article/details/81663377

版权

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（当错误发生）

somelittlelove

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
H5学习

video：autoplay：如果出现该属性，则视频在就绪后马上播放。controls：如果出现该属性，则向用户显示控件，比如播放按钮。height：设置视频播放器的高度。loop：如果出现该属性，则当媒介文件完成播放后再次开始播放。preload：如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。src：要播放的视频...
复制链接

扫一扫