"我是Spirit_Breeze,中文<晟世清风>,在这纷纷乱世之中,祈望能有一股清流之风."本人从事销售,不甘心于口舌之利,突然对代码和框架充满兴趣,遂之研究研究,欢迎研究讨论,转载请备注地址和作者,谢谢!
H5C3基础(三)
目标
-
能够使用全屏API做全屏操作
-
独立完成自定义播放器功能
-
能够使用本地存储API存储
全屏操作
全屏操作API
-
Node.requestFullScreen()
开启全屏显示 -
Node.cancelFullScreen()
关闭全屏显示
注意:
cancelFullScreen()
的调用时document
h5的api兼容问题
-
由于其兼容性原因,不同浏览器需要添加前缀如:webkit内核浏览器:webkitRequestFullScreen、webkitCancelFullScreen,如chrome浏览器。Gecko内核浏览器:mozRequestFullScreen、mozCancelFullScreen,如火狐浏览器。
-
document.isFullScreen检测当前是否处于全屏不同浏览器需要添加前缀document.webkitIsFullScreen、document.mozIsFullScreen
自定义播放器
多媒体API
音频和视频API一致
方法
方法 | 描述 |
---|---|
addTextTrack() | 向音频/视频添加新的文本轨道 |
canPlayType() | 检测浏览器是否能播放指定的音频/视频类型 |
load() | 重新加载音频/视频元素 |
play() | 开始播放音频/视频 |
pause() | 暂停当前播放的音频/视频 |
属性
属性 | 描述 |
---|---|
audioTracks | 返回表示可用音轨的 AudioTrackList 对象 |
autoplay | 设置或返回是否在加载完成后随即播放音频/视频 |
buffered | 返回表示音频/视频已缓冲部分的 TimeRanges 对象 |
controller | 返回表示音频/视频当前媒体控制器的 MediaController 对象 |
controls | 设置或返回音频/视频是否显示控件(比如播放/暂停等) |
crossOrigin | 设置或返回音频/视频的 CORS 设置 |
currentSrc | 返回当前音频/视频的 URL |
currentTime | 设置或返回音频/视频中的当前播放位置(以秒计) |
defaultMuted | 设置或返回音频/视频默认是否静音 |
defaultPlaybackRate | 设置或返回音频/视频的默认播放速度 |
duration | 返回当前音频/视频的长度(以秒计) |
ended | 返回音频/视频的播放是否已结束 |
error | 返回表示音频/视频错误状态的 MediaError 对象 |
loop | 设置或返回音频/视频是否应在结束时重新播放 |
mediaGroup | 设置或返回音频/视频所属的组合(用于连接多个音频/视频元素) |
muted | 设置或返回音频/视频是否静音 |
networkState | 返回音频/视频的当前网络状态 |
paused | 设置或返回音频/视频是否暂停 |
playbackRate | 设置或返回音频/视频播放的速度 |
played | 返回表示音频/视频已播放部分的 TimeRanges 对象 |
preload | 设置或返回音频/视频是否应该在页面加载后进行加载 |
readyState | 返回音频/视频当前的就绪状态 |
seekable | 返回表示音频/视频可寻址部分的 TimeRanges 对象 |
seeking | 返回用户是否正在音频/视频中进行查找 |
src | 设置或返回音频/视频元素的当前来源 |
startDate | 返回表示当前时间偏移的 Date 对象 |
textTracks | 返回表示可用文本轨道的 TextTrackList 对象 |
videoTracks | 返回表示可用视频轨道的 VideoTrackList 对象 |
volume | 设置或返回音频/视频的音量 |
事件
事件 | 描述 |
---|---|
abort | 当音频/视频的加载已放弃时 |
canplay | 当浏览器可以播放音频/视频时 |
canplaythrough | 当浏览器可在不因缓冲而停顿的情况下进行播放时 |
durationchange | 当音频/视频的时长已更改时 |
emptied | 当目前的播放列表为空时 |
ended | 当目前的播放列表已结束时 |
error | 当在音频/视频加载期间发生错误时 |
loadeddata | 当浏览器已加载音频/视频的当前帧时 |
loadedmetadata | 当浏览器已加载音频/视频的元数据时 |
loadstart | 当浏览器开始查找音频/视频时 |
pause | 当音频/视频已暂停时 |
play | 当音频/视频已开始或不再暂停时 |
playing | 当音频/视频在已因缓冲而暂停或停止后已就绪时 |
progress | 当浏览器正在下载音频/视频时 |
ratechange | 当音频/视频的播放速度已更改时 |
seeked | 当用户已移动/跳跃到音频/视频中的新位置时 |
seeking | 当用户开始移动/跳跃到音频/视频中的新位置时 |
stalled | 当浏览器尝试获取媒体数据,但数据不可用时 |
suspend | 当浏览器刻意不获取媒体数据时 |
timeupdate | 当目前的播放位置已更改时 |
volumechange | 当音量已更改时 |
waiting | 当视频由于需要缓冲下一帧而停止 |
细节注意
/*全屏操作后 自带的控制栏会显示 在显示的时候隐藏*/
video::-webkit-media-controls {
display: none !important;
}
.controls {
width: 700px;
height: 40px;
background-color: rgba(255, 255, 255, 0.2);
border-radius: 4px;
position: absolute;
left: 50%;
margin-left: -350px;
bottom: 5px;
/*比全屏的状态下的视频元素高*/
z-index: 100000000000;
opacity: 1;
}
本地存储
document.cookie
使用:
1. 设置cookie数据:document.cookie = '键=值;Expires=日期'
2. 获取cookie数据:document.cookie
1、如果没有设置有效期,会话结束就失效2、如果设置有效期,依据有效期时间失效3、在会话过程中,每次请求在报文的头部会携带cookie信息
window.sessionStorage
使用:
1.获取sessionStorage的长度:window.sessionStorage.length
2.根据对应的索引去获取对应sessionStorage的key的值:window.sessionStorage.key(索引);
3.添加/编辑sessionStorage的内容:window.sessionStorage.setItem(键,值);
4.根据对应的key获取对应的的value:window.sessionStorage.getItem(键);
5.根据对应的key删除记录:window.sessionStorage.removeItem(键);
6.清空存储:window.sessionStorage.clear();
1、生命周期为关闭浏览器窗口 2、在同一个窗口(页面)下数据可以共享
window.localStorage
使用:
1.获取localStorage的长度:window.localStorage.length
2.根据对应的索引去获取对应localStorage的key的值:window.localStorage.key(索引);
3.添加/编辑localStorage的内容:window.localStorage.setItem(键,值);
4.根据对应的key获取对应的的value:window.localStorage.getItem(键);
5.根据对应的key删除记录:window.localStorage.removeItem(键);
6.清空存储:window.localStorage.clear();
1、永久生效,除非手动删除 关闭页面也会存在 2、可以多窗口(页面)共享(同一浏览器可以共享)
总结
特性 | cookie | sessionStorage | localStorage |
---|---|---|---|
数据生命期 | 默认关闭浏览器失效 | 页面会话期间可用 | 除非数据被清除,否则一直存在 |
存放数据大小 | 4K左右(因为每次http请求都会携带cookie) | 一般5M或更大 | 约20M |
与服务器通信 | 由对服务器的请求来传递,每次都会携带在HTTP头中,如果使用cookie保存过多数据会带来性能问题 | 数据不是由每个服务器请求传递的,而是只有在请求时使用数据,不参与和服务器的通信 | |
易用性 | cookie需要自己封装setCookie,getCookie | 可以用源生接口 | |
共同点 | 都是保存在浏览器端,和服务器端的session机制不同 |
拖拽上传
拖拽事件
-
拖拽元素
-
ondrag 应用于拖拽元素,整个拖拽过程都会调用
-
ondragstart应用于拖拽元素,当拖拽开始时调用
-
ondragleave应用于拖拽元素,当鼠标离开拖拽元素时调用
-
ondragend应用于拖拽元素,当拖拽结束时调用
-
-
目标元素
-
ondragenter应用于目标元素,当拖拽元素进入时调用
-
ondragover应用于目标元素,当停留在目标元素上时调用
-
ondrop应用于目标元素,当在目标元素上松开鼠标时调用
-
ondragleave应用于目标元素,当鼠标离开目标元素时调用
-
上传案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box {
width: 200px;
height: 200px;
border: 1px dashed #ccc;
line-height: 200px;
text-align: center;
color: #ccc;
}
</style>
</head>
<body>
<div class="box">拖放图片到该区域</div>
<script>
var box = document.querySelector('.box');
box.addEventListener('dragenter', function (e) {
/*禁用浏览器默认预览文件或下载文件操作*/
e.preventDefault();
});
box.addEventListener('dragover', function (e) {
/*禁用浏览器默认预览文件或下载文件操作*/
e.preventDefault();
});
box.addEventListener('drop', function (e) {
e.preventDefault();
/*第一个文件数据*/
var file = e.dataTransfer.files[0];
//console.log(file);
/*把数据设置到表单数据中*/
var formData = new FormData();
formData.append('dragImage', file);
/*通过ajax异步提交*/
var xhr = new XMLHttpRequest();
xhr.open('post','upload.php');
xhr.send(formData);
xhr.onreadystatechange = function () {
if(xhr.readyState == 4 && xhr.status == 200){
/*上传成功*/
console.log('ok');
var img = new Image();
img.src = xhr.responseText;
document.querySelector('body').appendChild(img);
}
}
});
</script>
</body>
</html>
总结
本章节需要掌握H5的api的使用,和在应用场景的使用方式。