20178/2 笔记 html5新增API

1、多媒体

方法：load() 加载、play() 播放、pause() 暂停

属性：currentTime 视频播放的当前进度、

      duration:视频的总时间

      paused:视频播放的状态.

 

事件：

     oncanplay: 事件在用户可以开始播放视频/音频（audio/video）时触发。

     ontimeupdate:通过该事件来报告当前的播放进度.

    onended:播放完时触发

全屏：video.webkitRequestFullScreen();

案例：多媒体控制条

2、拖拽

默认图片和连接可以拖拽，h5任何元素都可以拖拽

要设置 draggable="true"

1）事件监听

拖拽元素

ondrag         应用于拖拽元素，整个拖拽过程都会调用

ondragstart  应用于拖拽元素，当拖拽开始时调用

ondragleave  应用于拖拽元素，当鼠标离开拖拽元素时调用

ondragend    应用于拖拽元素，当拖拽结束时调用

目标元素

ondragenter  应用于目标元素，当拖拽元素进入时调用

ondragover   应用于目标元素，当停留在目标元素上时调用，默认无法将数据放置到其他元素，如果要设置，调用event.preventDefault()方法，也就可以触发ondrop

ondrop         应用于目标元素，当在目标元素上松开鼠标时调用

ondragleave  应用于目标元素，当鼠标离开目标元素时调用

3、全屏

h5规范运行用户自定义网页上任一元素全屏显示。

requestFullscreen()开启全屏显示

cancleFullscreen()关闭全屏显示

不同浏览器需要添加前缀如：

 webkitRequestFullScreen、mozRequestFullScreen

 webkitCancleFullScreen、mozCancleFullScreen

 通过document.fullScreen检测当前是否处于全屏

 不同浏览器需要添加前缀

     document.webkitIsFullScreen、document.mozFullScreen

兼容性写法：

var docElm = document.documentElement;

    if (docElm.requestFullscreen) {

       docElm.requestFullscreen();

    }

    else if (docElm.mozRequestFullScreen) {

       docElm.mozRequestFullScreen();

    }

    else if (docElm.webkitRequestFullScreen) {

       docElm.webkitRequestFullScreen();

    }

4、web存储

向本地保存数据，有可能在浏览器内存里面，有可能在硬盘里

Storage 存储

window.sessionStorage 会话存储

window.localStorage 本地存储

1）特性

1、设置、读取方便
2、容量较大，sessionStorage约5M、localStorage约20M
3、只能存储字符串，可以将对象JSON.stringify() 编码后存储
2）window.sessionStorage
1、生命周期为关闭浏览器窗口
2、在同一个窗口下数据可以共享
3）window.localStorage
1、永久生效，除非手动删除
2、可以多窗口共享
     4)方法详解
setItem(key,value) 设置存储内容
getItem(key) 读取存储内容
removeItem(key) 删除键值为key的存储内容
clear() 清空所有存储内容
key(n) 以索引值来获取存储内容
 
案例：记住用户名
5、网络状态
1）window.online
用户连接时被调用
2)window.offline
用户断开时被调用
6、应用程序缓存
创建cache manifest文件
1）优势
1、可配置需要缓存的资源
2、网络无连接应用仍可用
3、本地读取缓存资源，提升访问速度，增强用户体验
4、减少请求，缓解服务器负担
2）缓存清单
一个普通文本文件，其中列出了浏览器应缓存以供离线访问的资源，推荐使用.appcache为后缀名，添加MIME类型
AddTypetext/cache-manifest .appcache
例如我们创建了一个名为demo.appcache的文件，然后在需要应用缓存在页面的根元素(html)添加属性manifest="demo.appcache"，路径要保证正确。
3）manifest文件格式
1、顶行写CACHE MANIFEST
2、CACHE: 换行 指定我们需要缓存的静态资源，如.css、image、js等
3、NETWORK: 换行 指定需要在线访问的资源，可使用通配符
4、FALLBACK: 当前页面无法访问时退回的页面(回退;  后退)
 换行 当被缓存的文件找不到时的备用资源 可自行查阅资料
注释以#开头
7、地理定位
navigater 导航
geolocation 地理定位
window.navigator.geolocation
获取方式：
1）ip地址
可以精确到城市
2）三维坐标
GPS：全球定位系统
wifi
手机信号
3）用户自定义数据
h5会以最佳的方式获取地理位置
隐私：
h5提供一套隐私保护机制，用户同意才能使用
API详解：
navigator.getCurrentPosition(successCallback,errorCallback, options) 获取当前地理信息
navigator.watchPosition(successCallback,errorCallback, options) 重复获取当前地理信息
1、当成功获取地理信息后，会调用succssCallback，并返回一个包含位置信息的对象position。Coords(坐标)
position.coords.latitude纬度
position.coords.longitude经度
2、当获取地理信息失败后，会调用errorCallback，并返回错误信息error
3、可选参数 options 对象可以调整位置信息数据收集方式
百度地图案例.