①属性
controls：如果出现该属性，则向用户显示控件，比如播放按钮。每个浏览器中的播放控件都不太一样，但用途都一样，都可以控制开始和结束，跳到新位置和调节音量autoplay：如果出现该属性，则视频在就绪后马上播放。如果不设置autoplay属性，必须是用户单击播放按钮才会播放音频文件。
loop：loop：(循环播放)告诉浏览器在音频到达末尾时，再从头开始重新播放
preload：auto、mete、none：告诉浏览器如何音频
duration：返回当前音频/视频的长度（以秒计）
paused：设置或返回音频/视频是否暂停
currentTime：设置或返回音频/视频中的当前播放位置（以秒计）
ended：返回音频/视频的播放是否已结束
oncanplay：当文件就绪可以开始播放时运行的脚本（缓冲已足够开始时）
ontimeupdate：当播放位置改变时（比如当用户快进到媒介中一个不同的位置时）运行的脚本。
onended：当媒介已到达结尾时运行的脚本（可发送类似“感谢观看”之类的消息）。
二、使用图标插件Font-AwesomeFont Awesome提供了可缩放的矢量图标，可以使用CSS所提供的所有特性对它们进行更改，包括：大小、颜色、阴影或者其它任何支持的效果。使用.：可以文件引入，也可以使用CDN
link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"
Font Awesome图标使用只需要使用CSS前缀fa，再加上图标名称。 Font Awesome是为使用内联元素而设计的。通常使用 i ，因为它更简洁。 但实际上使用 span 才能更加语义化。更多说明可以参考官网的介绍三、功能实现利用HTML+CSS制作一个自己的播放控件条，然后定位到视频最下方视频加载loading效果播放、暂停总时长和当前播放时长显示播放进度条
!DOCTYPE html html lang="en" head 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 video src="images/1.mp4" /video div a href="javascript:;" /a div div /div div /div /div div span 00:00:00 /span / span 00:00:00 /span /div a href="javascript:;" /a /div /div /figure script src="js/jquery.min.js" /script script src="js/player.js" /script /body /html
body{ padding: 0; margin: 0; font-family: "microsoft yahei","Helvetica",simhei,simsun,sans-serif; background-color: #f7f7f7; text-decoration: none;figcaption{ font-size: 24px; text-align: center; margin: 20px;.player{ width: 1280px; height: 720px; margin: 0 auto; border-radius: 4px; background: #000 url("../images/1.gif") center/300px no-repeat; position: relative; text-align: center;video{ display: none; height: 100%; margin: 0 auto;/* 全屏操作后,自带的控制栏会显示,在显示的时候隐藏 */video::-webkit-media-controls{ display: none !important;.controls{ width: 1240px; height: 40px; background: rgba(255, 255, 255, 0.2); border-radius: 4px; position: absolute; left: 50%; margin-left: -620px; bottom: 5px; z-index: 10000000000; opacity: 1;.player:hover .controls{ opacity: 1;/* 播放/暂停 */.controls .switch{ display: block; width: 20px; height: 20px; font-size: 20px; color: #fff; position: absolute; top: 11px; left: 11px;/* 全屏按钮 */.controls .expand{ display: block; width: 20px; height: 20px; font-size: 20px; color: #fff; position: absolute; right: 11px; top: 11px;/* 进度条 */.progress{ width: 1030px; height: 10px; border-radius: 3px; overflow: hidden; background-color: #555; cursor: pointer; position: absolute; top: 16px; left: 45px;/* 播放进度 */.progress .line{ width: 0px; height: 100%; background-color: #fff; position: absolute; top: 0; left: 0;.progress .bar{ width: 100%; height: 100%; opacity: 0; position: absolute; left: 0; top: 0; z-index: 1;/* 时间 */.timer{ height: 20px; line-height: 20px; position: absolute; left: 1080px; top: 11px; color: #fff; font-size: 14px;}$$(function () { // 获取需要操作的DOM元素,特别注意:多媒体相关的api是DOM元素提供的 var $$video = $$("video"); var video = $$video[0]; var $$total = $$(".total"); var $$switch = $$(".switch"); var $$line = $$(".line"); var $$current = $$(".current"); var $$expand = $$(".expand"); var $$bar = $$(".bar"); 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?h:"0"+h) + ":" + (m =10?m:"0"+m) + ":"+ (s =10?s:"0"+s); // 1.加载效果,总时长显示 video.oncanplay=function(){ $$video.show(); // 总时长获取 $$total.html(formatTime(video.duration)); // 2.播放功能,暂停功能 $$switch.on("click",function(){ // 判断当前的播放状态 if($$switch.hasClass("fa-play")){ // 播放 video.play(); // 暂停按钮 $$switch.removeClass("fa-play").addClass("fa-pause"); }else{ // 暂停 video.pause(); // 播放按钮 $$switch.addClass("fa-play").removeClass("fa-pause"); // 3.播放中进度条显示,当前播放时间的显示 video.ontimeupdate=function(){ $$current.html(formatTime(video.currentTime)); var ratio=video.currentTime/video.duration; var p=ratio*100+'%'; $$line.css("width",p); // 4.全屏/取消全屏 $$expand.on("click",function(){ if($$expand.hasClass("fa-arrows-alt")){ // 全屏操作 console.log("1"); video.webkitRequestFullScreen(); // 改按钮,全屏按钮 $$(this).removeClass("fa-arrows-alt").addClass("fa-compress"); }else{ console.log("2"); //取消全屏 document.webkitCancelFullScreen(); // 改按钮,取消按钮 $$(this).addClass("fa-arrows-alt").removeClass("fa-compress"); // 5.跃进功能 $$bar.on("click",function(e){ // 获取点击的位置和进度条宽度的比例,通过比例去计算播放时间 var width=$$bar.width(); var place=e.offsetX; var time=place/width*video.duration; // 设置 video.currentTime=time; // 触发播放时间更改事件,必须视频加载完成的时候才能看到效果 // 6.播放完毕重置功能 video.onended=function(){ video.currentTime=0; // 播放按钮 $$switch.addClass("fa-play").removeClass("fa-pause");})四、效果展示