一：回顾
二：多媒体：http://www.w3school.com.cn/tags/html_ref_audio_video_dom.asp
1. 常用方法：load() 加载、 play() 播放、 pause() 暂停
Jq 没有提供对视频播放控件的方式，也就意味着如果要操作视频播放，必
须使用原生的 js 方法—dom 元素
2. 常用属性：
a) currentTime 视频播放的当前进度、
b) duration:视频的总时间 100000/60
c) paused:视频播放的状态.
3. 常用事件：
a) oncanplay: 事件在用户可以开始播放视频/音频（audio/video）时触发。
b) ontimeupdate:通过该事件来报告当前的播放进度.
c) onended:播放完时触发—重置
三：多媒体案例：自定义视频播放器
1. 效果：
2. 页面结构：
<h3 class="playerTitle">视频播放器</h3>
<div class="player">
<video src="../mp3/test.mp4"></video>
<div class="controls">
<a href="javascript:;" class="switch fa fa-pause"></a>
<a href="javascript:;" class="expand fa fa-expand"></a>
<div class="progress">
<div class="bar"></div>
<div class="loaded"></div>
<div class="elapse"></div>
</div>
<div class="time">
<span class="currentTime">00:00:00</span>
\
<span class="totalTime">00:00:00</span>
</div>
</div>
</div>
3. Js 代码：
<script src="../js/jquery.min.js"></script>
<script>
/*获取到播放器*/
var video=$("video")[0];
/*暂停-播放切换*/
$(".switch").click(function(){
//1.切换样式，从暂停切换到播放，或者从播放切换到暂停
$(this).toggleClass("fa-pause fa-play");
//2.修改播放器的状态
if(video.paused){
video.play();
}
else{
video.pause();
}
});
/*全屏*/
$(".expand").click(function(){
video.webkitRequestFullScreen();
});
/*当可以进行播放的时候触发 oncanplay*/
video.oncanplay=function(){
setTimeout(function(){
video.style.display="block";
//1.获取视频的总时长,结果以秒作为单位
var duration=video.duration;
/*console.log(duration);*/ //256.278
//2.计算 时 分 秒
var hour= Math.floor(duration/3600);
var menite= Math.floor(duration%3600/60);
var second=Math.floor(duration%60);
//3.将时分秒信息填充到总时长 span 中
//3.1 设置时分秒的格式
hour=hour<10?"0"+hour:hour;
menite=menite<10?"0"+menite:menite;
second=second<10?"0"+second:second;
//3.2 填充
$(".totalTime").html(hour+":"+menite+":"+second);
},2000);
}
/*当视频在播放的时候，会触发下下面的方法 ontimeupdate*/
video.ontimeupdate=function(){
//1.获取当前已经播放过了时间
var elapseTime=video.currentTime;
//2.获取已过时间的时分秒
var hour= Math.floor(elapseTime/3600);
var menite= Math.floor(elapseTime%3600/60);
var second=Math.floor(elapseTime%60);
//3.将时分秒信息填充到当前时长 span 中
//3.1 设置时分秒的格式
hour=hour<10?"0"+hour:hour;
menite=menite<10?"0"+menite:menite;
second=second<10?"0"+second:second;
//3.2 填充
$(".currentTime").html(hour+":"+menite+":"+second);
//4.设置当前<div class="elapse"></div>的宽度
var valuePercent=0;
if(elapseTime>0){
valuePercent=elapseTime/video.duration*100;
$(".elapse").css("width",valuePercent+"%");
}
}
</script>
四：地理定位：了解
1. 在 HTML 规范中，增加了获取用户地理信息的 API，这样使得我们可以基
于用户位置开发互联网应用，即基于位置服务 (Location Base Service)
2. 获取地理信息方式
a) IP 地址
b) 三维坐标
i. GPS（Global Positioning System，全球定位系统）
ii. Wi-Fi
iii. 手机信号
c) 用户自定义数据
Commented [A1]: 1. 目前世界上在用或在建的第 2 代
全球卫星导航系统（GNSS）有：1.美国 Global
Positioning System （全球定位系统） 简称 GPS；.2.苏
联/俄罗斯 GLOBAL NAVIGATION SATELLITE SYSTEM
（全球卫星导航系统）简称 GLONASS（格洛纳斯）；3.
欧盟（欧洲是不准确的说法，包括中国在内的诸多国家
也参与其中）Galileo satellite navigation system（伽利
略卫星导航系统） 简称 GALILEO（伽利略）；4.中国
BeiDou(COMPASS) Navigation Satellite System（北斗卫
星导航系统）简称 BDS ；5.日本 Quasi-Zenith Satellite
System （准天顶卫星系统） 简称 QZSS ；印度 India
Regional Navigation Satellite System（印度区域卫星导
航系统）简称 IRNSS；以上 6 个系统中国都能使用。
如下图对不同获取方式的优缺点进行了比较，浏览器会自动以最优方式去
获取用户地理信息。
4. 隐私: 推送通知
HTML5 Geolocation(地理位置定位) 规范提供了一套保护用户隐私的机制。
必须先得到用户明确许可，才能获取用户的位置信息
5. API 说明：
a) navigator.getCurrentPosition(successCallback, errorCallback, options)
获取当前地理信息
b) navigator.watchPosition(successCallback, errorCallback, options) 重
复获取当前地理信息
c) 1、当成功获取地理信息后，会调用 succssCallback，并返回一个包含
位置信息的对象 position。Coords(坐标)
d) position.coords.latitude 纬度
e) position.coords.longitude 经度
f) 当获取地理信息失败后，会调用 errorCallback，并返回错误信息 error
g) 可选参数 options 对象可以调整位置信息数据收集方式
6. 百度地图案例-介绍
五：拖拽：
1. 定义和用法：拖放是 HTML5 中非常常见的功能。
2. 在拖放的过程中会触发以下事件：
