HTML5学习笔记-day2

多媒体

外部资料

1. 常用方法：load() 加载、 play() 播放、 pause() 暂停
   jQuery没有提供对视频播放控件的方式，也就意味着如果要操作视频播放，必须使用原生的js方法—dom元素
2. 常用属性：
   a)currentTime 视频播放的当前进度、
   b)duration:视频的总时间 100000/60
   c)paused:视频播放的状态.
3. 常用事件：
   a)oncanplay: 事件在用户可以开始播放视频/音频（audio/video）时触发。
   b)ontimeupdate:通过该事件来报告当前的播放进度.
   c)onended:播放完时触发—重置

多媒体案例：自定义视频播放器

1. 效果：
   
2. 页面结构：

视频播放器

    
    

        
        
        

            

            

            

        
        

            00:00:00
            \
            00:00:00
        
    

3. Js代码：

地理定位：了解

1. 在HTML规范中，增加了获取用户地理信息的API，这样使得我们可以基于用户位置开发互联网应用，即基于位置服务 (Location Base Service)
2. 获取地理信息方式
   a)IP地址
   b)三维坐标
   c)GPS（Global Positioning System，全球定位系统）
   d)Wi-Fi
   e)手机信号
   f)用户自定义数据
   如下图对不同获取方式的优缺点进行了比较，浏览器会自动以最优方式去获取用户地理信息。
   
3. 隐私: 推送通知
   HTML5 Geolocation(地理位置定位) 规范提供了一套保护用户隐私的机制。必须先得到用户明确许可，才能获取用户的位置信息
4. API说明：
   a)navigator.getCurrentPosition(successCallback, errorCallback, options) 获取当前地理信息
   b)navigator.watchPosition(successCallback, errorCallback, options) 重复获取当前地理信息
   c)1、当成功获取地理信息后，会调用succssCallback，并返回一个包含位置信息的对象position。Coords(坐标)
   d)position.coords.latitude纬度
   e)position.coords.longitude经度
   f)当获取地理信息失败后，会调用errorCallback，并返回错误信息error
   g)可选参数 options 对象可以调整位置信息数据收集方式
   6.百度地图案例-介绍

拖拽：

定义和用法：拖放是 HTML5 中非常常见的功能。

1. 在拖放的过程中会触发以下事件：
   a)在拖动目标上触发事件 (源元素):
   • ondragstart - 用户开始拖动元素时触发
   • ondrag - 元素正在拖动时触发
   • ondragleave - 当被鼠标拖动的对象离开其容器范围内时触发此事件,以鼠标为参考，鼠标离开可拖动对象范围
   • ondragend - 用户完成元素拖动后触发
     b)释放目标时触发的事件— 当拖拽元素在目标容器上进行操作的时候:

     • ondragenter - 当被鼠标拖动的对象进入其容器范围内时触发此事件

     • ondragover - 当某被拖动的对象在另一对象容器范围内拖动时触发此事件，要触发ondrop事件，必须在此事件上阻止浏览器默认行为，e.preventDefault().

     • ondragleave - 当被鼠标拖动的对象离开其容器范围内时触发 此事件,以鼠标为参考，鼠标离开可拖 动对象范围

     • ondrop - 在一个拖动过程中，释放鼠标键时触发此事件，在当前事件中实现元素拖拽之后的效果

2. 注意：
   1.在拖动元素时，每隔 350 毫秒会触发 ondrag 事件。
   2.为了让元素可拖动，需要使用 HTML5 draggable =”true”属性
   3.链接和图片默认是可拖动的，不需要 draggable 属性
   4.可以通过addEventListener来添加拖拽相关事件
   5.事件源：触发事件的源，一般情况下我们会将相同操作的多个对象绑定到同一个处理事件，同时传递当前的对象到处理方法，这就是事件源参数
   6.通过事件来捕获当前被拖拽的元素
   7.通过 e.dataTransfer.setData("Text", e.target.id);保存的值，这能在ondrop事件中通过e.dataTransfer.getData("Text")获取到，其他事件不能获取
   3.小案例：实现元素的拖拽操作：

2.网页结构代码：

    
试着把我拖过去


3.Js代码 (几个事件的说明)：

web存储：

1. 需求：随着互联网的快速发展，基于网页的应用越来越普遍，同时也变的越来越复杂，为了满足各种各样的需求，会经常性在本地存储大量的数据，传统方式我们以document.cookie来进行存储的，但是由于其存储大小只有4k左右，并且解析也相当的复杂，给开发带来诸多不便，HTML5规范则提出解决方案
2. HTML5提供的解决方案：
   a)window.sessionStorage
   b)window.localStorage
3. 特点：
   a)设置、读取方便
   b)容量较大，sessionStorage约5M、localStorage约20M
   c)只能存储字符串，可以将对象JSON.stringify() 编码后存储
4. Window.sessionStorage的使用
   a)特点：
   i.生命周期为关闭浏览器窗口：相当于存储在当前页面的内内存中
   ii.在同一个窗口下数据可以共享(在当前页面下可以获取到，换另外一个页面下不能获取到)
   b)方法介绍：(两种存储方式的方法一致)
   i.SetItem(key,value):设置数据，以键值对的方式
   ii.getItem(key):通过指定的键获取对应的值内容
   iii.removeItem(key):删除指定的key及对应的值内容
   iv.clear():清空所有存储内容
   c)使用说明：

5. Window.localStorage的使用
   a)特点：
   i.永久生效，除非手动删除：存储在硬盘上
   ii.可以多窗口共享。但是不能跨浏览器
   b)使用说明：

应用缓存：

1. 概念：使用 HTML5，通过创建 cache manifest 文件，可以轻松地创建 web 应用的离线版本
2. 优势：
   a)可配置需要缓存的资源
   b)网络无连接应用仍可用
   c)本地读取缓存资源，提升访问速度，增强用户体验
   d)减少请求，缓解服务器负担
3. Cache Manifest 基础：
   a)如需启用应用程序缓存，请在文档的 标签中包含 manifest 属性：

...

b)每个指定了 manifest 的页面在用户对其访问时都会被缓存。如果未指定 manifest 属性，则页面不会被缓存（除非在 manifest 文件中直接指定了该页面）。
c)manifest 文件的建议的文件扩展名是：".appcache"。
d)注意，manifest 文件需要配置正确的 MIME-type，即 “text/cache-manifest”。必须在 web 服务器上进行配置

4. Manifest 文件：
   a)概念：manifest 文件是简单的文本文件，它告知浏览器被缓存的内容（以及不缓存的内容）
   b)manifest 文件可分为三个部分
   CACHE MANIFEST – 开始
   CACHE在此标题下列出的文件将在首次下载后进行缓存
   NETWORK - 在此标题下列出的文件需要与服务器的连接，且不会被缓存
   FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面（比如 404 页面）
   c)CACHE MANIFEST说明：
   CACHE MANIFEST，放置在第一行，是必需的：

	CACHE ：
	/theme.css
	/logo.gif
	/main.js
	*   # * 号代表所有文件

上面的 manifest 文件列出了三个资源：一个 CSS 文件，一个 GIF 图像，以及一个 JavaScript 文件。当 manifest 文件加载后，浏览器会从网站的根目录下载这三个文件。然后，无论用户何时与因特网断开连接，这些资源依然是可用的
d)NETWORK说明：
NETWORK 小节规定文件 “login.asp” 永远不会被缓存，且离线时是不可用的，如

NETWORK:
login.asp  

e)FALLBACK说明：
FALLBACK 小节规定如果无法建立因特网连接，就使用指定的资源代替所请求的url的资源，如：

FALLBACK:
/html5/ /404.html
/ # /号代表所有文件

注释：当html5资源在离线状态下无法请求的时候，就使用404.html代替
f)其它：
1、CACHE: 可以省略，这种情况下将需要缓存的资源写在CACHE MANIFEST
2、可以指定多个CACHE: NETWORK: FALLBACK:，无顺序限制
3、#表示注释，只有当demo.appcache文件内容发生改变时或者手动清除缓存后，才会重新缓存。
4、chrome 可以通过chrome://appcache-internals/工具和离线（offline）模式来调试管理应用缓存
g)更新缓存：
一旦文件被缓存，则浏览器会继续展示已缓存的版本，即使修改了服务器上的文件。为了确保浏览器更新缓存，也需要更新 manifest 文件，也就意味着一旦应用被缓存，它就会保持缓存直到发生下列情况：
1.用户清空浏览器缓存
2.manifest 文件被修改（参阅下面的提示）
3.由程序来更新应用缓存
说明：更新注释行中的日期和版本号是一种使浏览器重新缓存文件的办法

网络状态

我们可以通过window.onLine来检测，用户当前的网络状况，事件参数可以返回一个布尔值

1. window.online用户网络连接时被调用
2. window.offline用户网络断开时被调用
3. 示例：

/*网络连接时调用*/
window.addEventListener("online",function(e){
    console.log("ok");
    console.log(e.returnValue);
});
/*网络断开时调用*/
window.addEventListener("offline",function(e){
    console.log("no");
    console.log(e.returnValue);
});

全屏

btn.onclick=function() {
    /*能力测试*/
    if(docuEle.requestFullScreen){
        document.getElementById("img").requestFullScreen();
    }
    else if(docuEle.webkitRequestFullScreen){
        document.getElementById("img").webkitRequestFullScreen();
    }
    else if(docuEle.mozRequestFullScreen){
        document.getElementById("img").mozRequestFullScreen();
    }
}

退出全屏
只能使用document来实现，退出事件不是某个元素的行为

判断是否全屏
document.fullscreenElement 返回布尔值

注意！只有在火狐浏览器下的属性名才符合Camel命名法

FileReader

FileReader:读取文件内容
1. readAsText():读取文本文件(可以使用Txt打开的文件)，返回文本字符串，默认编码是UTF-8
2. readAsBinaryString():读取任意类型的文件。返回二进制字符串。这个方法不是用来读取文件展示给用户看，而是存储文件。例如：读取文件的内容，获取二进制数据，传递给后台，后台接收了数据之后，再将数据存储
3. readAsDataURL():读取文件获取一段以data开头的字符串，这段字符串的本质就是DataURL.DataURL是一种将文件(这个文件一般就是指图像或者能够嵌入到文档的文件格式)嵌入到文档的方案。DataURL是将资源转换为base64编码的字符串形式，并且将这些内容直接存储在url中>>优化网站的加载速度和执行效率。
abort():中断读取

/获取数据/
/FileReader提供一个完整的事件模型，用来捕获读取文件时的状态
* onabort:读取文件中断片时触发
* onerror:读取错误时触发
* onload:文件读取成功完成时触发
* onloadend:读取完成时触发，无论成功还是失败
* onloadstart:开始读取时触发
* onprogress:读取文件过程中持续触发/