制作统一样式的H5视频播放器

前言

之前，忙于考试未来及更新文章。本文适用于掌握JavaScript html css jQuery的基本内容的读者。不知大家有没注意原生的H5视频播放器用不同的浏览器打开所呈现的效果并不一样。而如果我们想让不同浏览器打开的样式一样，那么就需要自己制作一个。本文将讲述这个小demo的全流程。

demo涉及的主要知识点

HTML5 全屏接口：
1.requestFullscreen 全屏
（标准化写法浏览器不识别，需要添加浏览器前缀）
HTML5 视频音频DOM：
2.ended 返回音频/视频的播放是否已结束
3.play（) 开始播放音频/视频
4.pause（）暂停
5.canplay 当浏览器可以播放音频/视频时
6.duration 视频总时长
7.ontimeupdate 当目前的播放位置已更改时
8.paused 设置或返回音频/视频是否暂停
原生JavaScript：
9.Math.floor() 向下取整
10. ？：三目运算符（？前面相当于if中的条件，：前面是与条件相符执行的内容，：后面是与条件不符执行的内容）
例如：如果 2 < 3 控制台打印正确，否则控制台打印错误

if（）{} else 写法:

 if (2 < 3) {console.log("正确");} else {console.log("错误");}

三目运算符写法：

 (2 < 3) ? console.log("正确"): console.log("错误");

jQuery：
11.toggleClass() 对设置或移除被选元素的一个或多个类进行切换。
12.addClass() 向匹配的元素添加指定的类名。
13.removeClass() 向匹配的元素移除指定的类名。

demo效果及功能

播放/暂停按钮的切换进度条（已播放模拟已加载总进度）时长数（当前总）全屏.

技术实现

先从结构样式开始
结构：

<h3 class="playerTitle">视频播放器</h3><div class="player"><!-- 视频区 --><video src="2.mp4"></video><!-- 控制区 --><div class="controls"><a href="javascript:;" class="switch fa fa-play"></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>

样式：

body {margin: 0;padding: 0;/* 去除浏览器内置内边框和外边框，防止干扰布局 */background-color: #f7f7f7;
}.playerTitle {width: 100%;margin: 0 auto;line-height: 100px;font-size: 40px;text-align: center;
}.player {width: 640px;height: 360px;margin: 0 auto;/* 实现居中 */position: relative;background: url(loading.gif) center no-repeat;/* 模拟视频播放前的预加载 */background-size: cover;
}video {height: 100%;margin: 0 auto;/* 实现居中 */display: none;/* 视频先不显示，先模拟视频播放前的加载 */
}.controls {width: 640px;height: 40px;position: absolute;left: 0;bottom: -40px;background-color: rgba(0, 0, 0, 0.671);
}.controls>.switch {width: 20px;height: 20px;display: block;font-size: 20px;color: #fff;position: absolute;left: 10px;top: 10px;
}.controls>.expand {width: 20px;height: 20px;display: block;font-size: 20px;color: #fff;position: absolute;right: 10px;top: 10px;
}.controls>.progress {width: 350px;height: 10px;position: absolute;left: 40px;bottom: 15px;background-color: #555;
}.controls>.progress>.bar {width: 100%;height: 100%;border-radius: 3px;cursor: pointer;position: absolute;left: 0;top: 0;opacity: 0;z-index: 999;/* 使它置于最后一层 */
}.controls>.progress>.loaded {width: 60%;height: 100%;background-color: #999;border-radius: 3px;position: absolute;left: 0;top: 0;z-index: 2;/* 置于第二层 */
}.controls>.progress>.elapse {width: 0%;height: 100%;background-color: #fff;border-radius: 3px;position: absolute;left: 0;top: 0;z-index: 3;/* 置于第三层 */
}.controls>.time {height: 20px;position: absolute;left: 430px;top: 10px;color: #Fff;font-size: 14px;
}

不要忘记引入！！！

<link rel="stylesheet" href="font-awesome.css">
<!-- 字体 -->
<link rel="stylesheet" href="video.css">
<script src="jquery-1.11.1.min.js"></script>
<!-- jQuery -->
<script src="tool.js"></script>
<!-- 封装的函数 -->
<script src="video.js"></script>

播放暂停全屏按钮都属于字体
关键部分来了，此demo重要的部分就是 JavaScript部分
1.获取播放器，使JavaScript能够对播放器进行设置
video.js:

var video = $("video")[0];

2.实现全屏

video.requestFullscreen();

但需要添加前缀才能被浏览器识别，例如：Google浏览器

if (video.requestFullscreen) {video.requestFullscreen();}else if (video.webkitRequestFullscreen) {video.webkitRequestFullscreen();}

为了实现多个浏览器的都兼容，还需要添加其他浏览器的前缀，此时可以封装成一个函数在video.js直接调用就能实现效果，让主要JavaScript文件看起来个更整洁更容易查看。
tool.js:

// 封装兼容性全屏操作
function fullScreen() {var video = $("video")[0];if (video.requestFullscreen) {video.requestFullscreen();} else if (video.oRequestFullscreen) {video.oRequestFullscreen();} else if (video.webkitRequestFullscreen) {video.webkitRequestFullscreen();} else if (video.msRequestFullscreen) {video.msRequestFullscreen();} else if (video.mozRequestFullscreen) {video.mozRequestFullscreen();}
}

video.js:

$(".expand").click(function() {// 调用全屏fullScreen();});

3.实现暂停与播放

播放暂停是两个状态那么设计切换—肯定有if（）{}else{}
切换可以封装成一个函数，然后使用时直接调用函数
video.js:

// 实现播放暂停$(".switch").click(function() {// 调用播放暂停函数videoToggle();// 标签的样式的切换（播放按钮和暂停按钮的切换）//fa-play 播放  fa-pause 暂停$(this).toggleClass("fa-play fa-pause");});

tool.js:

// 视频播放暂停的切换
function videoToggle() {var video = $("video")[0];if (video.paused) {video.play();// 移除暂停样式，添加播放样式} else {video.pause();// 移除播放样式，添加暂停样式}
}

4.实现播放的业务逻辑，当视频文件可以播放时触发从模拟播放前加载过渡到视频播放显示出来，并且让总时长展示出来。
特别注意：duration是以秒为单位的并且含小数，所以需要计算时分秒并且向下取整
之后的当前长也需要这个操作，所以可以封装成一个函数，然后之前调用传参。
tool.js:

// 将视频以秒计改为时分秒，同时补零
function getResult(time) {// 时 60 * 60 = 3600  // 分 总时长 / 3600 的余数// 秒 总时长 / 60 的余数//不要忘记取整var hour = Math.floor(time / 3600);var minute = Math.floor(time % 3600 / 60);var second = Math.floor(time % 60);// 补零操作 eg.01:02:01hour = hour < 10 ? "0" + hour : hour;minute = minute < 10 ? "0" + minute : minute;second = second < 10 ? "0" + second : second;//显示格式：00:00：00return hour + ":" + minute + ":" + second;
}

video.js:

// 实现播放的业务逻辑，当视频文件可以播放时触发下面的事件video.oncanplay = function() {// 延迟显示  ---->过渡 使视频出现不那么唐突setTimeout(function() {// 将当前视频文件设置为显示video.style.display = "block";// 获取当前视频的总时长(总时长是以秒为单位的，同时获取了小数值) ，所以需要根据总时长计算出时分秒var total = video.duration;// 计算结果的显示格式var result = getResult(total);// 将计算结果放置到指定的dom元素中$(".totalTime").html(result);}, 2000);};

5.实现播放过程中的业务逻辑，当视频播放时会触发进度条跟随视频的播放而实时变动，并且当前时长（需要计算时分秒）显示出来并且实时变动。
video.js:

          // 实现播放过程中的业务逻辑，当视频播放时会触发// 只要currentTime值改变就会触发这个事件（timeupdate）video.ontimeupdate = function() {// 获取当前的播放时间var current = video.currentTime;// 计算时分秒var result = getResult(current);// 将结果展示在指定的dom元素中$(".currentTime").html(result);// 设置进度条样式  eg.播放了总时长的12% 0.12-->0.12 *100 + %var percent = current / video.duration * 100 + "%";$(".elapse").css("width", percent);}

6.实现视频的跳播
video.js:

$(".bar").click(function(e) {var offset = e.offsetX;// 获取当前鼠标相对于父元素的left值    ---->偏移值var percent = offset / $(this).width();// 计算偏移值相对父元素总宽度的比例var current = percent * video.duration;// 计算这个位置对应的视频进度值video.currentTime = current;// 设置当前视频的currentTime  使进度条与当前实现的显示对应上});

7.最后播放完毕后将视频重置到初始状态：
video.js:

video.onended = function() {video.currentTime = 0;//当前时长归零$(".switch").removeClass("fa-pause").addClass("fa-play");//把暂停样式切换成播放样式}

特别注意：video.js上述代码的最外层需要写

$(function() {}

因为使用jQuery的选择器以及标签。

结语

本文主要介绍了如何实现一个各种浏览器统一样式的视频播放器。写的不好之处还请各位指出。