什么是HTML5（二）：通信、离线&存储、多媒体

最新推荐文章于 2024-07-12 09:35:17 发布

gigi就是我

最新推荐文章于 2024-07-12 09:35:17 发布

阅读量998

点赞数

分类专栏：这个是啥 html 文章标签： html5 html

本文链接：https://blog.csdn.net/crystal6918/article/details/53580322

版权

html 同时被 2 个专栏收录

18 篇文章 0 订阅

订阅专栏

这个是啥

11 篇文章 0 订阅

订阅专栏

通信

web sockets

允许在页面和服务器之间建立持久连接并通过这种方法来交换非 HTML 数据。

WebSockets 是一种先进的技术, 这使得在用户的浏览器和一个服务器之间建立全双工连接成为可能。有了这个API，你可以向服务器发送消息,并接收事件驱动的响应, 无需轮询服务器的响应。

使用服务器发送事件

Server-sent events
允许服务器向客户端推送事件，而不是仅在响应客户端请求时服务器才能发送数据的传统范式。

webRTC

WebRTC中的RTC是实时通信的简称，这是一种支持在浏览器客户端之间语音/视频交流和数据分享的技术。
WebRTC作为一项标准,使得所有浏览器无需安装插件或第三方软件，就可以点对点地分享应用数据和进行电话会议。

离线&存储

使用应用缓存

HTML5 提供一种 应用缓存 机制，使得基于web的应用程序可以离线运行。
开发者可以使用 Application Cache (AppCache) 接口设定浏览器缓存的数据并使得数据离线有效。
在处于离线状态时，即使用户点击刷新按钮，应用也能正常加载与工作。

使用应用缓存可以得到以下益处：

离线浏览: 用户可以在离线状态下浏览网站内容。
更快的速度: 因为数据被存储在本地，所以速度会更快。
减轻服务器的负载: 浏览器只会下载在服务器上发生改变的资源。

在线和离线事件

概述

为了构建一个支持离线的 web 应用，你需要知道你的应用何时真正处于离线状态。同时，你还需要知道应用何时重新回到了「在线」状态。实际上，我们可以把需求分解成如下内容：

你需要知道用户何时回到在线状态，这样你就可以与服务器重新同步。
你需要知道用户何时处于离线状态，这样你就可以将对服务器的请求放入队列中以便稍后使用。

这便是在线/离线事件所要处理的过程。

API

navigator.online
navigator.onLine 是一个值为 true/false (true 表示在线， false 表示离线) 的属性。当用户通过选择对应的菜单项 (Firefox 中为文件 -> 离线工作) 切换到「离线模式」时，这个值就会被更新。

此外，当浏览器长时间无法连接到网络时，该值也会被更新。

online和offline事件

Firefox 3 引入了两个新事件：「online」与「offline」。
当浏览器从在线与离线状态中切换时，这两个事件会在页面的 <body> 上触发。
此外，该事件会从 document.body 冒泡到 document 上，最后到达 window。两个事件都无法被取消(你无法阻止用户进入在线或离线状态)。

可以使用熟悉的方式来注册事件：

在 window，document，或 document.body 上使用 addEventListener
将 document 或 document.body 的 .ononline 或 .onoffline 属性设置为一个 JavaScript Function 对象。(注意：由于兼容性原因，不能使用 window.ononline 或 window.onoffline。)
在 HTML 标记中的 <body> 标签上指定 οnοnline=”…” 或 οnοffline=”…” 特性。

Storage

此部分内容的详细信息可以参考js学习笔记：数据存储中的Web存储部分。

Storage被设计为用来提供一个更大存储量,更安全,更便捷的存储方法,从而可以代替掉将一些不需要让服务器知道的信息存储到cookies里的这种传统方法。

概述

Storage很有用，因为在浏览器端没有好的方法来持久保存大量数据。浏览器cookie的能力有限，而且不支持组织持久数据，其他方法（如flash本地存储）需要外部插件支持。

以下所提到的对象都是全局对象，作为 window对象的属性存在。这意味着可以以 sessionStorage 或者 window.sessionStorage 的形式访问这些对象。

Storage

它是所有Storage实例的构造函数（如，sessionStorage和globalStorage[location.hostname]）

注意，globalStorage不是Storage的实例，globalStorage[location.hostname]才是。

而且虽然可以直接通过标准的 JavaScript 属性访问方法来设置和读取值，但是推荐的做法是使用 getItem 和 setItem 方法。

sessionStorage

sessionStorage 是个全局对象，它维护着在页面会话期间有效的存储空间。

只要浏览器开着，页面会话周期就会一直持续。
当页面重新载入(reload)或者被恢复(restores)时，页面会话也是一直存在的。
每在新标签或者新窗口中打开一个新页面，都会初始化一个新的会话。

当浏览器被意外刷新的时候，一些临时数据应当被保存和恢复。sessionStorage 对象在处理这种情况的时候是最有用的。

例子：
自动保存一个文本域中的内容，如果浏览器被意外刷新，则恢复该文本域中的内容，所以不会丢失任何输入的数据。

// 获取到我们要循环保存的文本域
 var field = document.getElementById("field");

 // 查看是否有一个自动保存的值
 // (只在浏览器被意外刷新时)
 if ( sessionStorage.getItem("autosave")) {
    // 恢复文本域中的内容
    field.value = sessionStorage.getItem("autosave");
 }

 // 每隔一秒检查文本域中的内容
 setInterval(function(){
    // 并将文本域的值保存到session storage对象中
    sessionStorage.setItem("autosave", field.value);
 }, 1000);

localStorage

和sessionStorage相同，但它是持久化的，除非用户清除缓存，否则将会一直存在。

indexedDB

IndexedDB 是一个为了能够在客户端存储可观数量的结构化数据，并且在这些数据上使用索引进行高性能检索的 API。

虽然 Storage 对于存储少量数据是非常有用的，但是它对大量结构化数据的存储就显得力不从心了。IndexedDB 则提供了这样的一个解决方案。

在web应用中使用文件

使用HTML5 DOM新增的File API，可以让网页要求用户选择本地文件，并且读取这些文件的信息了。
选择的方式既可以是HTML<input> 元素，也可以是拖拽。

访问选中的文件

<input type="file" id="input">

通过File API,我们可以在用户选取一个或者多个文件之后,访问到代表了所选文件的一个或多个File对象,这些对象被包含在一个FileList对象中.

如果用户只选择了一个文件,那么我们只需要访问这个FileList对象中的第一个元素.

可以使用传统的DOM选择方法来获取到用户所选择的文件：

var selected_file = document.getElementById('input').files[0];

如果你的程序可以让用户选择多个文件,记得要在input元素上加上multiple属性：

<input type="file" id="input" multiple onchange="handleFiles(this.files)">

获取所选文件的信息

用户所选择的文件都存储在了一个FileList对象上，其中每个文件都对应了一个File对象。你可以通过这个FileList对象的length属性知道用户一共选择了多少个文件：

var numFiles = files.length;

File对象上有三个属性提供了所包含文件的相关信息.

name
文件名,只读字符串,不包含任何路径信息.
size
文件大小,单位为字节,只读的64位整数.
type
MIME类型,只读字符串,如果类型未知,则返回空字符串.

多媒体

使用HTML5音视频

可参考什么是HTML5（一）中的相关部分。

使用Camera API

通过Camera API,你可以使用手机的摄像头拍照,然后把拍到的照片发送给当前网页.

这些操作主要是通过一个input元素来实现的,其中该元素的type属性必须为”file”,accept属性要允许图片格式,这样才能知道这个文件选择框是用来选择图片的.,完整的HTML结构看起来是这样的:、

<input type="file" id="take-picture" accept="image/*">

当用户激活这个HTML元素的时候,系统会呈现给用户一个选择界面,其中一个选项是选择本地的图片文件,另一个选项是要通过摄像头直接拍摄照片作为所选文件.

如果用户选择了摄像头,则会进入手机的拍照模式.拍照结束后,用户可以选择确定还是放弃.如果接受了,则该照片会作为所选文件发送给那个<input type="file">元素,同时触发该元素的onchange事件.

通过File API,你可以获取到用户所拍摄的照片或者所选择的图片文件的引用:

var takePicture = document.querySelector("#take-picture");
takePicture.onchange = function (event) {
    // 获得图片文件的引用
    var files = event.target.files,
        file;
    if (files && files.length > 0) {
        file = files[0];
    }
};

这个API现在基本还没有浏览器支持。

track元素

HTML <track> 元素被当作媒体元素—<audio> 和 <video>的子元素来使用。它允许指定字幕（或者基于事件的数据）。

属性：

default
该属性定义了该track应该启用，除非用户首选项指定了更合适一个track。每个媒体元素里面只有一个 track 元素可以有这个属性。
kind
定义了 text track 应该如何使用。如果省略了该属性，默认的 kind 值就是 subtitles。下面是允许的关键字：
- subtitle：字幕
- captions：隐藏式字幕。
- descriptions：视频内容的文本描述。
- chapters：章节标题。
- metadata：脚本使用的track。对用户不可见。
label
当列出可用的text tracks的标题。
src
track的地址。必须是合法的URL。该属性必须定义。
srclang
track文本数据的语言。
如果 kind 属性被设为 subtitles, 那么srclang 必须定义。

track 给媒体元素添加的数据的类型在 kind 属性中设置，属性值可以是 subtitles, captions, descriptions, chapters 或 metadata。该元素指向当用户请求额外的数据时浏览器公开的包含定时文本的源文件。

一个media 元素的任意两个 track 子元素不能有相同的 kind, srclang, 和 label属性。

例子：

<video controls>
   <source src="sample.ogv" type="video/ogv">
   <track kind="captions" src="sampleCaptions.srt" srclang="en">
   <track kind="descriptions" src="sampleDesciptions.srt" srclang="en">
   <track kind="chapters" src="sampleChapters.srt" srclang="en">
   <track kind="subtitles" src="sampleSubtitles_de.srt" srclang="de">
   <track kind="subtitles" src="sampleSubtitles_en.srt" srclang="en">
   <track kind="subtitles" src="sampleSubtitles_ja.srt" srclang="ja">
   <track kind="subtitles" src="sampleSubtitles_oz.srt" srclang="oz">
   <track kind="metadata" src="keyStage1.srt" srclang="en" label="Key Stage 1">
   <track kind="metadata" src="keyStage2.srt" srclang="en" label="Key Stage 2">
   <track kind="metadata" src="keyStage3.srt" srclang="en" label="Key Stage 3">
</video>