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

  1 <!DOCTYPE html>
  2 <html>
  3 <head lang="en">
  4     <meta charset="UTF-8">
  5     <title></title>
  6     <link rel="stylesheet" href="css/font-awesome.min.css"/>
  7     <style>
  8         *{
  9             margin: 0;
 10             padding: 0;
 11         }
 12 
 13         figcaption{
 14             text-align: center;
 15             font-size:24px;
 16             font-family: "Microsoft Yahei";
 17         }
 18 
 19         .player{
 20             width: 720px;
 21             height: 360px;
 22             margin:100px auto;
 23             /*background-color: #000;*/
 24             background: url(images/loading.gif) no-repeat #000 center;
 25             background-size:auto 100%;
 26             position: relative;
 27         }
 28 
 29         video{
 30             /*display: none;*/
 31             height:100%;
 32             display: block;
 33             margin:0px auto;
 34             /*display: none;*/
 35         }
 36 
 37         .controls{
 38             position: absolute;
 39             width: 700px;
 40             height: 40px;
 41             background-color: rgba(255,255,0,0.3);
 42             left:10px;
 43             bottom:10px;
 44             border-radius: 5px;
 45 
 46 
 47         }
 48 
 49         .switch{
 50             position: absolute;
 51             left:10px;
 52             top:10px;
 53             width: 20px;
 54             height: 20px;
 55             font-size:18px;
 56             text-align: center;
 57             line-height: 20px;
 58             color:yellow;
 59             cursor: pointer;
 60         }
 61 
 62         .progress{
 63             width: 432px;
 64             height: 10px;
 65             background-color: rgba(255,255,255,0.3);
 66             position: absolute;
 67             left:50px;
 68             top:15px;
 69             border-radius: 4px;
 70             overflow: hidden;
 71         }
 72 
 73         .curr-progress{
 74 
 75             height:100%;
 76             background-color: #ffffff;
 77             width: 0%;
 78         }
 79 
 80         .time{
 81             position: absolute;
 82             width: 120px;
 83             height: 20px;
 84 
 85             left:505px;
 86             top:10px;
 87             font-size:12px;
 88             color:#fff;
 89             text-align: center;
 90             line-height: 20px;
 91         }
 92 
 93         .extend{
 94             position: absolute;
 95             right:20px;
 96             top:10px;
 97             width: 20px;
 98             height: 20px;
 99             font-size:18px;
100             cursor: pointer;
101             text-align: center;
102             line-height: 20px;
103             color:yellow;
104         }
105     </style>
106 </head>
107 <body>
108     <!-- 媒体标签-->
109     <figure>
110         <figcaption>视频案例</figcaption>
111         <div class="player">
112             <video src="video/fun.mp4"></video>
113             <!-- 控制条-->
114             <div class="controls ">
115                 <!-- 开关-->
116                 <span class="switch icon-play"></span>
117                 <!-- 进度条-->
118                 <div class="progress">
119                     <div class="curr-progress"></div>
120                 </div>
121                 <!-- 时间-->
122                 <div class="time">
123                     <span class="curr-time">00:00:00</span>/<span class="total-time">00:00:00</span>
124                 </div>
125                 <!-- 全屏-->
126                 <span class="extend icon-resize-full"></span>
127             </div>
128         </div>
129     </figure>
130 
131     <script>
132         //获取需要的标签
133         var video=document.querySelector('video');
134 
135         var playBtn=document.querySelector('.switch');
136 
137         var currProgress=document.querySelector('.curr-progress');
138 
139         var currTime=document.querySelector('.curr-time');
140 
141         var totaltime=document.querySelector('.total-time');
142 
143         var extend=document.querySelector('.extend');
144 
145         var progress=document.querySelector('.progress');
146         var controls =document.querySelector('.controls');
147         var player=document.querySelector('.player');
148 
149 
150         var Ttime=0;
151 //      首先：  通过点击 实现 视频的暂停/播放 改变按钮的样式
152 //      然后：　获取视频的总时长，放到totalTime中
153 //      然后：  当视频播放的时候， 动态谁知crrTime的值，并且改变进度条的样式
154 //      最后：  实现全屏效果
155 
156         playBtn.onclick=function(){
157             if(video.paused){
158                 video.play();
159                 this.classList.remove('icon-play');
160                 this.classList.add('icon-pause');
161             }else{
162                 video.pause();
163                 this.classList.remove('icon-pause');
164                 this.classList.add('icon-play');
165             }
166         }
167 
168 
169         video.oncanplay=function(){
170 
171 //            获取视频的总时长
172             Ttime=video.duration;
173 
174 //             转换成十分秒的格式
175             var h=Math.floor(Ttime/3600);
176 
177             var m=Math.floor(Ttime%3600/60);
178 
179             var s=Math.floor(Ttime%60);
180 
181             h=h>10?h:'0'+h;
182             m=m>10?m:'0'+m;
183             s=s>10?s:'0'+s;
184 
185             totaltime.innerHTML=h+':'+m+':'+s;
186         }
187 
188         video.ontimeupdate=function(){
189 
190             var Ctime=video.currentTime;
191 
192             //转换成十分秒的格式
193             var h=Math.floor(Ctime/3600);
194 
195             var m=Math.floor(Ctime%3600/60);
196 
197             var s=Math.floor(Ctime%60);
198 
199             h=h>10?h:'0'+h;
200             m=m>10?m:'0'+m;
201             s=s>10?s:'0'+s;
202 
203             currTime.innerHTML=h+':'+m+':'+s;
204 
205 
206         // 动态改变进度条
207             var value=Ctime/Ttime;
208 
209             currProgress.style.width=value*100+"%";
210 
211 
212 
213         }
214 
215 
216     //全屏
217         extend.onclick=function(){
218             video.webkitRequestFullScreen();
219         }
220 
221         //  点击定位视频的进度
222         progress.onclick = function (event) {
223             event = event || window.event;  // 鼠标的坐标
224             //  获取进度条的左上角的坐标
225             var pagex = event.pageX || event.clientX + document.documentElement.scrollLeft;
226             //获取进度条的宽度
227             var value= pagex-player.offsetLeft-controls.offsetLeft-progress.offsetLeft ;
228             var value2 = pagex - currProgress.getBoundingClientRect().left;
229             console.log(value+"------"+value2);
230             
231             currProgress.style.width = value +"px";
232             // 定位视频的进度
233             video.currentTime = video.duration* value/progress.offsetWidth  ;
234 
235 //            console.log(player.offsetLeft);
236 //            console.log(controls.offsetLeft);
237 //          console.log(progress.offsetLeft);
238 //            console.log(currProgress.offsetLeft);
239 
240 //            console.log(progress.offsetWidth);
241             console.log("视频的长度"+video.duration);
242             console.log("当前鼠标坐标："+pagex);
243             console.log("当前鼠标坐标："+event.clientX);
244             console.log("进度条的宽度："+currProgress.clientWidth);
245             console.log("进度条的左上角坐标："+currProgress.getBoundingClientRect().left);
246             console.log("被卷去的头部"+document.documentElement.scrollLeft);
247         }
248 
249     </script>
250 </body>
251 </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 文件.

地理定位

获取用户地理信息
可以开发基于用户位置的互联网应用
基于位置服务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('获取用户位置失败！')
        }

可使用百度地图api

网络状态

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

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

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

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

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

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

1.1 Font Awesome 字体框架

http://fontawesome.dashgame.com/

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

posted @ 2017-05-18 23:44 明明明明明明明明阅读(702) 评论(0) 编辑收藏举报

刷新页面返回顶部