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

多媒体

　　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();
}

获取盒子的绝对定位坐标

　　

var odiv=document.getElementById('divid');

alert(odiv.getBoundingClientRect().left);

alert(odiv.getBoundingClientRect().top);

 <!DOCTYPE html>
 <html>
 <head lang="en">
     <meta charset="UTF-8">
     <title></title>
     <link rel="stylesheet" href="css/font-awesome.min.css"/>
     <style>
         *{
             margin: ;
             padding: ;
         }

         figcaption{
             text-align: center;
             font-size:24px;
             font-family: "Microsoft Yahei";
         }

         .player{
             width: 720px;
             height: 360px;
             margin:100px auto;
             /*background-color: #000;*/
             background: url(images/loading.gif) no-repeat # center;
             background-size:auto %;
             position: relative;
         }

         video{
             /*display: none;*/
             height:%;
             display: block;
             margin:0px auto;
             /*display: none;*/
         }

         .controls{
             position: absolute;
             width: 700px;
             height: 40px;
             background-color: rgba(,,,0.3);
             left:10px;
             bottom:10px;
             border-radius: 5px;

         }

         .switch{
             position: absolute;
             left:10px;
             top:10px;
             width: 20px;
             height: 20px;
             font-size:18px;
             text-align: center;
             line-height: 20px;
             color:yellow;
             cursor: pointer;
         }

         .progress{
             width: 432px;
             height: 10px;
             background-color: rgba(,,,0.3);
             position: absolute;
             left:50px;
             top:15px;
             border-radius: 4px;
             overflow: hidden;
         }

         .curr-progress{

             height:%;
             background-color: #ffffff;
             width: %;
         }

         .time{
             position: absolute;
             width: 120px;
             height: 20px;

             left:505px;
             top:10px;
             font-size:12px;
             color:#fff;
             text-align: center;
             line-height: 20px;
         }

         .extend{
             position: absolute;
             right:20px;
             top:10px;
             width: 20px;
             height: 20px;
             font-size:18px;
             cursor: pointer;
             text-align: center;
             line-height: 20px;
             color:yellow;
         }
     </style>
 </head>
 <body>
     <!-- 媒体标签-->
     <figure>
         <figcaption>视频案例</figcaption>
         <div class="player">
             <video src="video/fun.mp4"></video>
             <!-- 控制条-->
             <div class="controls ">
                 <!-- 开关-->
                 <span class="switch icon-play"></span>
                 <!-- 进度条-->
                 <div class="progress">
                     <div class="curr-progress"></div>
                 </div>
                 <!-- 时间-->
                 <div class="time">
                     <span class="curr-time">::</span>/<span class="total-time">::</span>
                 </div>
                 <!-- 全屏-->
                 <span class="extend icon-resize-full"></span>
             </div>
         </div>
     </figure>

     <script>
         //获取需要的标签
         var video=document.querySelector('video');

         var playBtn=document.querySelector('.switch');

         var currProgress=document.querySelector('.curr-progress');

         var currTime=document.querySelector('.curr-time');

         var totaltime=document.querySelector('.total-time');

         var extend=document.querySelector('.extend');

         var progress=document.querySelector('.progress');
         var controls =document.querySelector('.controls');
         var player=document.querySelector('.player');

         var Ttime=;
 //      首先：  通过点击 实现 视频的暂停/播放 改变按钮的样式
 //      然后：　获取视频的总时长，放到totalTime中
 //      然后：  当视频播放的时候， 动态谁知crrTime的值，并且改变进度条的样式
 //      最后：  实现全屏效果

         playBtn.onclick=function(){
             if(video.paused){
                 video.play();
                 this.classList.remove('icon-play');
                 this.classList.add('icon-pause');
             }else{
                 video.pause();
                 this.classList.remove('icon-pause');
                 this.classList.add('icon-play');
             }
         }

         video.oncanplay=function(){

 //            获取视频的总时长
             Ttime=video.duration;

 //             转换成十分秒的格式
             var h=Math.floor(Ttime/);

             var m=Math.floor(Ttime%/);

             var s=Math.floor(Ttime%);

             h=h>?h:''+h;
             m=m>?m:''+m;
             s=s>?s:''+s;

             totaltime.innerHTML=h+':'+m+':'+s;
         }

         video.ontimeupdate=function(){

             var Ctime=video.currentTime;

             //转换成十分秒的格式
             var h=Math.floor(Ctime/);

             var m=Math.floor(Ctime%/);

             var s=Math.floor(Ctime%);

             h=h>?h:''+h;
             m=m>?m:''+m;
             s=s>?s:''+s;

             currTime.innerHTML=h+':'+m+':'+s;

         // 动态改变进度条
             var value=Ctime/Ttime;

             currProgress.style.width=value*+"%";

         }

     //全屏
         extend.onclick=function(){
             video.webkitRequestFullScreen();
         }

         //  点击定位视频的进度
         progress.onclick = function (event) {
             event = event || window.event;  // 鼠标的坐标
             //  获取进度条的左上角的坐标
             var pagex = event.pageX || event.clientX + document.documentElement.scrollLeft;
             //获取进度条的宽度
             var value= pagex-player.offsetLeft-controls.offsetLeft-progress.offsetLeft ;
             var value2 = pagex - currProgress.getBoundingClientRect().left;
             console.log(value+"------"+value2);

             currProgress.style.width = value +"px";
             // 定位视频的进度
             video.currentTime = video.duration* value/progress.offsetWidth  ;

 //            console.log(player.offsetLeft);
 //            console.log(controls.offsetLeft);
 //          console.log(progress.offsetLeft);
 //            console.log(currProgress.offsetLeft);

 //            console.log(progress.offsetWidth);
             console.log("视频的长度"+video.duration);
             console.log("当前鼠标坐标："+pagex);
             console.log("当前鼠标坐标："+event.clientX);
             console.log("进度条的宽度："+currProgress.clientWidth);
             console.log("进度条的左上角坐标："+currProgress.getBoundingClientRect().left);
             console.log("被卷去的头部"+document.documentElement.scrollLeft);
         }

     </script>
 </body>
 </html>

多媒体

http://mingm.cn/demo/09-HTML+CSS3/27-HTML-第二天/code/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 文件.

地理定位

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

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

b)  GPS 非常精确

c)  BeiDoui（BDS）

d)  wifi信号：室内

e)  手机信号

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

1. 浏览器会自动以最优化方式获取用户地理信息
2. navigator.geolocation.getCurrentPosition(successCallback,errorCallback) 调用成功则调用seccessCallback函数　　
3. 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('获取用户位置失败！')
        }

可使用百度地图api

网络状态

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

window.online用户网络连接时被调用

window.offline用户网络断开时被调用

1. window.addEventListener（‘online’，function（）｛｝）用户网络链接时被调用（on和其他事件的on不同，这里代表打开）
2. window.addEventListener（‘offline’，function（）｛｝）用户网络断开的时候调用

a)  拔掉网线或者禁用以太网

1. window.addEventListener（‘事件（不带on）’）

1.1   Font Awesome 字体框架

http://fontawesome.dashgame.com/

Font Awesome为您提供可缩放的矢量图标，您可以使用CSS所提供的所有特性对它们进行更改，包括：大小、颜色、阴影或者其它任何支持的效果