清风带你学-H5+CSS3基础（三）H5 -API的使用

"我是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的使用，和在应用场景的使用方式。