一、多媒体播放器
引入视频 Video： <video src="" ></video>
方法：a. play() 播放 b.pause() 暂停
属性：a.播放当前时间（当前时间）currentTime
b.视频总时长（获取持续时间） duration
c. 播放的状态 paused
事件：a.视频播放的过程会一直触发这个函数，播放过程中，各动态变化 timeupdate
b.当视频可以播放的时候执行，一般是在函数里面写总时间 canplay
二、全屏
方法：a. webkit: -webkitRequestFullscreen() //谷歌浏览器
b. moz: mozRequestFullScreen() //火狐浏览器
c. ms: msRequestFullscreen()
d. requestFullscreen()
关闭全屏显示 cancleFullScreen()
通过document.fullScreen检测当前是否处于全屏
三、拖放
在HTML5的规范中，我们可以通过为元素增加draggable="true"来设置此元素是否可以进行拖拽操作，其中图片、链接默认是开启的。
1、拖拽元素
一个属性：页面中设置了draggable="true"属性的元素。设置元素是否可以拖拽。
2、目标元素
页面中任何一个元素都可以成为目标元素
3、事件监听拖拽元素
ondrag 应用于拖拽元素，整个拖拽过程都会调用
ondragstart 应用于拖拽元素，当拖拽开始时调用
ondragleave 应用于拖拽元素，当鼠标离开拖拽元素时调用
ondragend 应用于拖拽元素，当拖拽结束时调用
目标元素
ondragenter 应用于目标元素，当拖拽元素进入时调用
ondragover 应用于目标元素，当停留在目标元素上时调用
ondragleave 应用于目标元素，当鼠标离开目标元素或拖拽结束时时调用
四、web存储 （就是可以通过js 向用户本地保存数据）
随着互联网的快速发展，基于网页的应用越来越普遍，同时也变的越来越复杂，为了满足各种各样的需求，会经常性在本地存储大量的数据，传统方式我们以document.cookie来进行存储的，但是由于其存储大小只有4k左右，并且解析也相当的复杂，给开发带来诸多不便，HTML5规范则提出解决方案。
①Storage 存储 ②window.sessionStorage（会话存储）③window.localStorage（本地存储）
特性：①设置、读取方便②容量较大，sessionStorage约5M、localStorage约20M
③只能往本地存储一些比较简单的字符串数据。以将对象JSON.stringify() 编码后存储。以键值对的方式存储。
两个对象提供了四个方法让我们来进行操作：
a.设置数据 setItem(key,value)
b.通过键读取值 getItem(key); //返回值，使用var 接收，然后打印
c.通过键移除值 removeItem(key); //根据指定的key 移除数据
d.清除数据 clear(); //清空数据，把所有的键值对都移除
两个对象有什么区别：
①两个对象都有这样的方法。
解释：往sessionStorage 里面保存了数据，关闭浏览器，然后再重新打开这个浏览器，在获取这些数据， 没有数据了。说明：说明数据存在浏览器的内存里面，关闭浏览器，内存里面的数据清空了
③localStorage 保存在硬盘上面。永久生效，除非手动删除；可以多窗口共享。
解释：往localStorage 里面保存了数据，关闭浏览器，再次访问这个页面，再次打开浏览器，还是可以获取 到localStorage 这个对象里面的数据。说明数据保存在我的本地硬盘上面。
五、地理定位
在HTML规范中，增加了获取用户地理信息的API，这样使得我们可以基于用户位置开发互联网应用，即基于位置服务 (Location BaseService)。
1、获取信息的方式。浏览器会自动以最优方式去获取用户地理信息。
2、隐私
HTML5Geolocation(地理位置定位) 规范提供了一套保护用户隐私的机制。必须先得到用户明确许可，才能 获取用户的位置信息。
3、API详解
//接收一个回调函数
//获取定位成功之后就会调用showPostion
window.navagator.geolocation.getCurrentPosition(showposition)
//position 可以获取经纬度。 //浏览器传递一个参数，把经纬度通过这个position 传给我们。
function showposition(position){
position.coords.latitude;
position.coords.longitude;
}
//实际应用我们是获取到经纬度，然后调用百度地图。
navigator.getCurrentPosition(successCallback,errorCallback, options) 获取当前地理信息
navigator.watchPosition(successCallback,errorCallback, options) 重复获取当前地理信息
①当成功获取地理信息后，会调用succssCallback，并返回一个包含位置信息的对象position。Coords(坐标)
position.coords.latitude纬度 position.coords.longitude经度
②当获取地理信息失败后，会调用errorCallback，并返回错误信息error
③可选参数 options 对象可以调整位置信息数据收集方式
六、网络状态
我们可以通过window.onLine来检测，用户当前的网络状况，返回一个布尔值。
①window.online用户网络连接时被调用②window.offline用户网络断开时被调用
//当有网络的时候会触发该事件。
window.addEventListener("online",function(){
alert("已经建立了网络连接")；
})
//当离线的时候触发该事件
window.addEventListener("offline",function(){
alert("世界上最遥远的距离就是没有网!!!")；
}) 七、离线存储
HTML5中我们可以轻松的构建一个离线（无网络状态）应用，只需要创建一个cache manifest文件。
缓存文件，缓存图片，缓存页面，缓存css，缓存js1、优势
a.可配置需要缓存的资源
b.网络无连接应用仍可用
c.本地读取缓存资源，提升访问速度，增强用户体验
d.减少请求，缓解服务器负担
2、缓存清单
一个普通文本文件，其中列出了浏览器应缓存以供离线访问的资源，推荐使用.appcache为后缀名，添加 MIME类型。
AddType text/cache-manifest .appcache
例如：我们创建了一个名为demo.appcache的文件，然后在需要应用缓存在页面的根元素(html)添加属性 manifest="demo.appcache"，路径要保证正确。
3、manifest文件格式
a. 顶行写CACHE MANIFEST
b. CACHE: 换行指定我们需要缓存的静态资源，如.css、image、js等
c. NETWORK: 换行指定需要在线访问的资源，可使用通配符
d.FALLBACK:(回退; 后退)
换行 当被缓存的文件找不到时的备用资源
使用缓存两步：
1：定义一个缓存文件 demo.appcache
①CACHE MAINFEST
②CACHE: //缓存文件的路径
③NETWORK:需要有网才能访问的文件。
2：在页面使用缓存文件
<html manifest="demo.appcache">
</html>
4、其他
a. CACHE: 可以省略，这种情况下将需要缓存的资源写在CACHE MANIFEST
b. 可以指定多个CACHE: NETWORK: FALLBACK:，无顺序限制
CACHE:需要缓存那些资源.
NETWORK:不需要缓存那些资源，必须在网络下面才能访问.
FALLBACK:当访问不到某个资源时，自动由另外一个资源替换. 例如：
one.css two.css 会缓存two.css 当找不到one.css 会去找two.css 文件.
c. #表示注释，只有当demo.appcache文件内容发生改变时或者手动清除缓存后，才会重新缓存。
d. chrome 可以通过chrome://appcahe-internals/工具和离线
八、历史
提供window.history，对象我们可以管理历史记录，可用于单页面应用，Single Page Application，可以无刷新改 变网页内容。
旧版本浏览器. history.back() 回退 history.forward()前进
扫一扫
1908
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
