全屏操作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机制不同 |
代码示例
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>视频播放</title>
<!--字体图标文件-->
<link rel="stylesheet" href="css/font-awesome.css"/>
<!--修饰视频播放器样式-->
<link rel="stylesheet" href="css/player.css"/>
</head>
<body>
<!--多媒体语义标签-->
<figure>
<!--多媒体区域的标题解释-->
<figcaption>视频播放器</figcaption>
<div class="player">
<!--一开始隐藏 加载可以播放就显示-->
<video src="./media/fun.mp4"></video>
<!--自定义控制栏-->
<div class="controls">
<!-- 开始播放按钮 -->
<a href="javascript:;" class="switch fa fa-play"></a>
<!-- 进度显示区域 -->
<div class="progress">
<!--进度显示条-->
<div class="line"></div>
<!--默认的灰色进度条-->
<div class="bar"></div>
</div>
<!--时间区域-->
<div class="timer">
<span class="current">00:00:00</span> / <span class="total">00:00:00</span>
</div>
<!--全屏按钮 取消全屏按钮-->
<a href="javascript:;" class="expand fa fa-arrows-alt"></a>
</div>
</div>
<input type="text" class="dm"><button class="send">发射</button>
</figure>
<script src="js/jquery.min.js"></script>
<script>
$(function () {
/*需求*/
/*适配jquery对象*/
var $video = $('video');
/*视频操作的相关api不在jquery 在dom上*/
var video = $video.get(0); //$video[0]
/*播放或者暂停按钮*/
var $switch = $('.switch');
/*默认的灰色进度条*/
var $bar = $('.bar');
/*显示进度的条*/
var $line = $('.line');
/*当前播放时间*/
var $current = $('.current');
/*总时间*/
var $total = $('.total');
/*全屏或取消按钮*/
var $expand = $('.expand');
/*转换格式的方法*/
var formatTime = function (time) {
/*处理的业务逻辑*/
var h = Math.floor(time / 3600);
var m = Math.floor(time % 3600 / 60);
var s = Math.floor(time % 60);
return (h < 10 ? '0' + h : h) + ':' + (m < 10 ? '0' + m : m) + ':' + (s < 10 ? '0' + s : s);
};
/*1. 实现加载效果（需要去判断当视频可以播放，视频显示）*/
video.oncanplay = function () {
$video.show();
/*5. 时间显示 （实时的获取当前的播放时间 转换为需要的格式） 总时间*/
var duration = video.duration;
$total.html(formatTime(duration));
}
/*2. 播放功能 （点击播放图标 进行播放 需要把当前的按钮改为暂停）*/
/*3. 暂停功能 （点击暂停图标 进行暂停 需要把当前的按钮改为播放）*/
$switch.on('click', function () {
/*播放操作*/
if ($switch.hasClass('fa-play')) {
video.play();
$switch.removeClass('fa-play').addClass('fa-pause');
}
/*暂停操作*/
else {
video.pause();
$switch.removeClass('fa-pause').addClass('fa-play');
}
});
/*4. 进度显示 （实时的获取当前的播放时间 需要获取总时间 根据比设置宽度）*/
video.ontimeupdate = function () {
/*5. 时间显示 （实时的获取当前的播放时间 转换为需要的格式）*/
var currentTime = video.currentTime;
$current.html(formatTime(currentTime));
/*设置宽度 使用的是 当前播放时间和总时间的比例*/
var ratio = video.currentTime / video.duration * 100 + '%';
$line.css('width', ratio);
}
/*8. 跃进功能 （获取当前点击的位置和总宽度的比例 去获取需要跳转的时间点）*/
$bar.on('click', function (e) {
/*获取点击的位置*/
var offsetX = e.offsetX;
/*获取进度条宽度*/
var width = $bar.width();
/*计算比例 获取需要跳转的时间点*/
var ratio = offsetX/width;
/*需要跳转的时间点*/
var time = ratio * video.duration;
/*怎么改变当前播放的时间*/
video.currentTime = time;
});
/*6. 全屏功能 （全屏操作）*/
/*7. 取消全屏功能 （取消全屏操作）*/
$expand.on('click',function () {
/*判断当前是全屏就是*/
if($expand.hasClass('fa-arrows-alt')){
$('.player')[0].webkitRequestFullScreen();
$expand.removeClass('fa-arrows-alt').addClass('fa-compress');
}
/*如果不是执行取消全屏操作*/
else {
document.webkitCancelFullScreen();
$expand.addClass('fa-arrows-alt').removeClass('fa-compress');
}
});
/*问题：在使用esc取消全屏的时候 按钮样式不更改*/
/*1. 方案：监听esc的按键事件 判断keyCode 去更改样式 在全屏操作的时候会禁用key相关事件*/
/*2. 方案：监听页面尺寸改变 当视频处于取消全屏状态 才去修改样式*/
$(window).on('resize',function () {
/*判断全屏状态 如果不是全屏 需要改回全屏按钮*/
if(!document.webkitIsFullScreen){
$expand.addClass('fa-arrows-alt').removeClass('fa-compress');
}
});
/*同学们的新需求 */
$('.send').on('click',function () {
var text = $('.dm').val();
var $player = $('.player');
$player.append($('<span></span>').text(text).css({
width:200,
position:'absolute',
right:-200,
fontWeight:'bold',
top:300*Math.random(),
color:'rgb('+Math.floor(256*Math.random())+','+Math.floor(256*Math.random())+','+Math.floor(256*Math.random())+')',
zIndex:10000
}).animate({right:720},10000,function () {
$(this).remove();
}));
});
/*1. 跃进功能 file://打开 */
/*2. 谷歌浏览器62 你们的呢？ 64版本以上兼容问题 全屏后控制栏可见 不可点击 */
/*3. 插件 video.js ckplayer.js */
});
</script>
</body>
</html>
网友评论