html5_day2
一：多媒体：
- 常用方法：load() 加载、 play() 播放、 pause() 暂停
Jq没有提供对视频播放控件的方式，也就意味着如果要操作视频播放，必须使用原生的js方法—dom元素
- 常用属性：
- currentTime 视频播放的当前进度、
- duration:视频的总时间 100000/60
- paused:视频播放的状态.
- 常用事件：
- oncanplay: 事件在用户可以开始播放视频/音频（audio/video）时触发。
- ontimeupdate:通过该事件来报告当前的播放进度.
- onended:播放完时触发—重置
三：多媒体案例：自定义视频播放器
- 效果：
- 页面结构：
<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>- 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>
三：地理定位：了解
- 在HTML规范中，增加了获取用户地理信息的API，这样使得我们可以基于用户位置开发互联网应用，即基于位置服务 (Location Base Service)
- 获取地理信息方式
如下图对不同获取方式的优缺点进行了比较，浏览器会自动以最优方式去获取用户地理信息。
- 隐私: 推送通知
HTML5 Geolocation(地理位置定位) 规范提供了一套保护用户隐私的机制。必须先得到用户明确许可，才能获取用户的位置信息
- API说明：
- navigator.getCurrentPosition(successCallback, errorCallback, options) 获取当前地理信息
- navigator.watchPosition(successCallback, errorCallback, options) 重复获取当前地理信息
- 1、当成功获取地理信息后，会调用succssCallback，并返回一个包含位置信息的对象position。Coords(坐标)
- position.coords.latitude纬度
- position.coords.longitude经度
- 当获取地理信息失败后，会调用errorCallback，并返回错误信息error
- 可选参数 options 对象可以调整位置信息数据收集方式
- 百度地图案例-介绍
五：拖拽：
-
-
- 定义和用法：拖放是 HTML5 中非常常见的功能。
- 在拖放的过程中会触发以下事件：
- 在拖动目标上触发事件 (源元素):
- ondragstart - 用户开始拖动元素时触发
- ondrag - 元素正在拖动时触发
- ondragend - 用户完成元素拖动后触发
- 释放目标时触发的事件— 当拖拽元素在目标容器上进行操作的时候:
- ondragenter - 当被鼠标拖动的对象进入其容器范围内时触发此事件
- ondragover - 当某被拖动的对象在另一对象容器范围内拖动时触发此事件
- ondragleave - 当被鼠标拖动的对象离开其容器范围内时触发此事件
- ondrop - 在一个拖动过程中，释放鼠标键时触发此事件
- 在拖动目标上触发事件 (源元素):
- 注意：
- 在拖动元素时，每隔 350 毫秒会触发 ondrag 事件。
- 为了让元素可拖动，需要使用 HTML5 draggable 属性
- 链接和图片默认是可拖动的，不需要 draggable 属性
- 可以通过addEventListener来添加拖拽相关事件
- 事件源：触发事件的源，一般情况下我们会将相同操作的多个对象绑定到同一个处理事件，同时传递当前的对象到处理方法，这就是事件源参数
- 小案例：实现元素的拖拽操作：
- 效果:
-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
.div1{
width: 200px;
height: 200px;
border: 1px solid red;
position: relative;
margin-left:20px;
float: left;
}
.div2{
width: 200px;
height: 200px;
border: 1px solid blue;
position: relative;
margin-left:20px;
float: left;
}
.div3{
width: 200px;
height: 200px;
border: 1px solid green;
position: relative;
margin-left:20px;
float: left;
}
p{
background-color: orange;
margin-top: 5px;
}
</style>
</head>
<body>
<div class="div1" id="div1">
<!--在h5中，如果想拖拽元素，就必须为元素添加draggable="true". 图片和超链接默认就可以拖拽-->
<p id="pe" draggable="true">试着把我拖过去</p>
<p id="pe1" draggable="true">试着也把我拖过去</p>
</div>
<div class="div2" id="div2"></div>
<script>
/**
* a) 在拖动目标上触发事件 (源元素):
ondragstart - 用户开始拖动元素时触发
ondrag - 元素正在拖动时触发
ondragend - 用户完成元素拖动后触发
b) 释放目标时触发的事件— 当拖拽元素在目标容器上进行操作的时候:
ondragenter - 当被鼠标拖动的对象进入其容器范围内时触发此事件
ondragover - 当某被拖动的对象在另一对象容器范围内拖动时触发此事件
ondragleave - 当被鼠标拖动的对象离开其容器范围内时触发此事件
ondrop - 在一个拖动过程中，释放鼠标键时触发此事件
*/
let obj = null;
document.ondragstart = function (ev) {
obj = ev.target;
obj.style.opacity = 0.5;
obj.parentNode.style.borderWidth=5+"px";
/*通过dataTransfer来实现数据的存储与获取
* setData(format,data):
* format:数据的类型：text/html text/uri-list
* Data:数据:一般来说是字符串值*/
ev.dataTransfer.setData("text/html",ev.target.id)
};
document.ondragend = function (ev) {
ev.target.style.opacity = 1;
ev.target.parentNode.style.borderWidth=1+"px";
};
// // 当被鼠标拖动的对象进入其容器范围内时触发此事件
// div.ondragenter = function () {
// console.log("ondragenter")
//
// }
// document.ondragenter = function (ev) {
// console.log(ev)
// }
// //当某被拖动的对象在另一对象容器范围内拖动时触发此事件
document.ondragover = function (ev) {
/*如果想触发ondrop事件，那么就必须在这个位置阻止浏览器的默认行为*/
ev.preventDefault();
}
document.ondrop = function (ev) {
ev.target.appendChild(document.getElementById(ev.dataTransfer.getData('text/html')));
}
// /*浏览器默认会阻止ondrop事件：我们必须在ondragover中阻止浏览器的默认行为*/
// div.ondrop = function () {
// div.appendChild(p);
// }
</script>
</body>
</html>六：web存储：
- 需求：随着互联网的快速发展，基于网页的应用越来越普遍，同时也变的越来越复杂，为了满足各种各样的需求，会经常性在本地存储大量的数据，传统方式我们以document.cookie来进行存储的，但是由于其存储大小只有4k左右，并且解析也相当的复杂，给开发带来诸多不便，HTML5规范则提出解决方案
- HTML5提供的解决方案：
- window.sessionStorage
- window.localStorage
- 特点：
- 设置、读取方便
- 容量较大，sessionStorage约5M、localStorage约20M
- 只能存储字符串，可以将对象JSON.stringify() 编码后存储
- Window.sessionStorage的使用
- 特点：
- 生命周期为关闭浏览器窗口：相当于存储在当前页面的内内存中
- 在同一个窗口下数据可以共享(在当前页面下可以获取到，换另外一个页面下不能获取到)
- 方法介绍：(两种存储方式的方法一致)
- SetItem(key,value):设置数据，以键值对的方式
- getItem(key):通过指定的键获取对应的值内容
- removeItem(key):删除指定的key及对应的值内容
- clear():清空所有存储内容
- 使用说明：
- 特点：
<script>
var userData=document.getElementById("userName");
//存储数据
document.getElementById("setData").onclick=function(){
window.sessionStorage.setItem("userName",userData.value);
}
//获取数据
document.getElementById("getData").onclick=function(){
var value=window.sessionStorage.getItem("userName");
alert(value);
}
</script>
Window.localStorage的使用
特点：
永久生效，除非手动删除：存储在硬盘上
可以多窗口共享。但是不能跨浏览器
使用说明：
<script>
var userData=document.getElementById("userName");
//存储数据
document.getElementById("setData").onclick=function(){
window.localStorage.setItem("userName",userData.value);
}
//获取数据
document.getElementById("getData").onclick=function(){
var value=window.localStorage.getItem("userName");
alert(value);
}
//删除数据
document.getElementById("removeData").onclick=function(){
window.localStorage.removeItem("userName");
}
</script>