HTML5 02. 多媒体控件、拖拽事件、历史记录、web存储、应用程序缓存、地理定位、网络状态

时间：2017-05-19 00:58:30 阅读：352 评论：0 收藏：0 [点我收藏+]

标签：mime类型 code 字符 pwd 百度地图 ssi 样式包括 online

多媒体

　　video:是行内块（text-align: center; 对行内块适用）

　　<figure></figure>: 多媒体标签；

　　<figcaption></figcaption>: 多媒体标题

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

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

　　　　duration：视频的总时间、

　　　　paused：视频播放的状态

事件： oncanplay：事件在用户可以开始播放视频／音频(audio／video)时触发

　　　　　　　　　　　　video.oncanplay = funciton() { } ;

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

　　　　　　　　　　　　video.ontimeupdate = function() { };

　　　　onended: 播放完时触发

全屏： video.webkitRequestFullScreen() ;

关闭全屏： video.cancleFullscreen() ；　　注意大写

// 全屏兼容写法
if(box.requestFullscreen){
    box.requestFullscreen();
}else if(box.webkitRequestFullScreen){
    box.webkitRequestFullScreen();
}else if(box.mozRequestFullScreen){
    box.mozRequestFullScreen() ;
}

通过document.fullScreen 检测当前是否是处于全屏、不同浏览器需加前缀

案例：

　　a）基本样式，进度条、播放按钮、当前时间／总时间、全屏

　　b）设置播放暂停事件，修改按钮

　　c）获取总时间。当前时间，同步时间

　　d）进度条同步播放，当前时间／总时间

　　e）全屏事件

　　f）点击位置播放点击出视频

　　g）缓冲进度条

var extend = document.querySelector(‘.extend‘);  // 绑定全屏按钮
extend.onclick = function(){　　　　　　　　　　　　// 点击后全屏
    video.webkitRequestFullScreen();
}

mingm.cn/demo/09-HTML+CSS3/27-HTML-第二天/4-代码/01-多媒体/02-多媒体控制条-练习.html

cn若不成功则更换为top即可

拖拽

　　为元素添加 draggable="true";来设置此元素是否可以进行拖拽操作，图片和链接默认时开启的。

拖拽元素：设置了draggable = ‘true‘属性的元素

目标元素：页面中任何一个元素都可以成为目标元素

事件监听：

拖拽元素：

ondrag: 　　应用于拖拽元素，整个拖拽过程都会调用。box.ondrag=function(){ console.log(‘拖拽正在进行‘) } ;

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

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

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

目标元素：

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

ondragover：　当停留在目标元素上时调用

ondrop:　　　当在目标元素上松开鼠标时调用

ondragleave: 当鼠标离开目标元素时调用

阻止拖拽事件的默认行为：

div.ondragover = function( event ){
    event.preventDefault();    　　　　　　　　 // 阻止拖拽事件的默认行为
    console.log ( ‘over...‘ ) ;
}

历史　　　　　

　　 window.history 对象可以管理历史记录，可用于单页面应用，

　　Single Page Application 可以无刷新改变网页内容

旧版本浏览器

　　history.back() 回退

　　history.forward() 前进

Web存储

　　传统方式： document.cookie ；传统方式， 4k大小。解析复杂／存储数据量小

　　storage存储：

　　　a）window.sessionStorage。(会话存储，容量5M)

　　　　　　1. 生命周期为关闭浏览器窗口

　　　　　　2. 在同一个窗口下数据可以共享

　　　b）window.localStorage （本地存储，容量20M）

　　　　　　1. 永久生效，除非手动删除

　　　　　　2. 可以多窗口共享

　　 c）设置、读取方便

　　　d）只能存储字符串，可以将对象json.stringify() ，编码后存储

　　　e）可能存储在浏览器内存和硬盘上

方法：

　　a） window.sessionStorage 关闭窗口数据销毁

　　　　1. window.sessiionStorage.setItem( key, value)

　　　　　　设置存储内容／再次给同一个key负值，将覆盖之前数据

　　　　2. window.sessionStorage.getItem(key) 获取存储数据

　　　　3. window.sessionStorage.removeItem(key) 删除key

　　　　4. window.sessionStorage.clear() 清除所有数据

　b）window.localStorage 数据存储在硬盘上永久存储

　　　　1. window.localStorage.setItem( key,value )

　　　　　　设置存储内容／再次给同一个key赋值，将覆盖之前数据

　　　　2. window.localStorage.getItem( key ) 获取存储数据

　　　　3. window.localStorage.removeItem( key ) 删除key

　　　　4. window.localStorage.clear(). 清除所有数据

打开网页自动获取数据：

window.onload=function(){

userName.value=window.localStorage.getItem(‘userName‘);
pwd.value=window.localStorage.getItem(‘pwd‘);
}

应用程序缓存

HTML5中我们可以轻松的构建一个离线（无网络状态）应用，只需要创建一个cache manifest文件。

优势

1、可配置需要缓存的资源

2、网络无连接应用仍可用

3、本地读取缓存资源，提升访问速度，增强用户体验

4、减少请求，缓解服务器负担

一个普通文本文件，其中列出了浏览器应缓存以供离线访问的资源，推荐使用.appcache为后缀名，添加MIME类型

AddType text/cache-manifest .appcache

　　例如我们创建了一个名为demo.appcache的文件，然后在需要应用缓存在页面的根元素(html)添加属性

　　<html manifest="demo.appcache" > 路径要保证正确。

manifest文件格式

1、顶行写CACHE MANIFEST

2、CACHE: 换行指定我们需要缓存的静态资源，如.css、image、js等

3、NETWORK: 换行指定需要在线访问的资源，可使用通配符

4、FALLBACK: 当前页面无法访问时退回的页面(回退; 后退)

CACHE MANIFEST

#注释开头用#

CACHE:
#要缓存的文件

NETWORK
#指定必须联网才能缓存的文件

FALLBACK
#当前页面无法访问时，返回的一个页面
　　one.css two.css    #会缓存two.css 当找不到one.css 会去找two.css 文件.

地理定位

获取用户地理信息
可以开发基于用户位置的互联网应用
基于位置服务Location Base Service
定位方式

a) IP可以一般精确到城市，运算代价大

b) GPS 非常精确

c) BeiDoui（BDS）

d) wifi信号：室内

e) 手机信号

f) 用户自定义数据（用户自己输入自己位置）

浏览器会自动以最优化方式获取用户地理信息
navigator.geolocation.getCurrentPosition(successCallback,errorCallback) 调用成功则调用seccessCallback函数　　
var wd = position.coords.latitude; //纬度
var js = position.coords.longitude;//经度

if(navigator.geolocation){
 如果支持，获取用户地理信息

//            successCallback 当获取用户位置成功的回调函数
//            errorCallback 当获取用户位置失败的回调函数

            navigator.geolocation.getCurrentPosition(successCallback,errorCallback);

        }else{
            console.log(‘sorry,你的浏览器不支持地理定位‘);
        }
        // 获取地理位置成功的回调函数
        function successCallback(position){获取用户当前的经纬度
//            coords坐标
//            纬度latitude
            var wd=position.coords.latitude;
//            经度longitude
            var jd=position.coords.longitude;

            console.log("获取用户位置成功！");
            console.log(wd+‘----------------‘+jd);
        }
// 获取地理位置失败的回调函数
        function errorCallback(error){
            console.log(error);
            console.log(‘获取用户位置失败！‘)
        }