一、自定义视频播放器的主要API（更多可以查看参考手册）
①属性
- controls：如果出现该属性，则向用户显示控件，比如播放按钮。每个浏览器中的播放控件都不太一样，但用途都一样，都可以控制开始和结束，跳到新位置和调节音量
- autoplay：如果出现该属性，则视频在就绪后马上播放。如果不设置autoplay属性，必须是用户单击播放按钮才会播放音频文件。
- loop：loop：(循环播放)告诉浏览器在音频到达末尾时，再从头开始重新播放
- preload：auto、mete、none：告诉浏览器如何下载音频
- duration：返回当前音频/视频的长度（以秒计）
- paused：设置或返回音频/视频是否暂停
- currentTime：设置或返回音频/视频中的当前播放位置（以秒计）
- ended：返回音频/视频的播放是否已结束
②方法
- play()：开始播放音频/视频
- pause()：暂停当前播放的音频/视频
③事件
- oncanplay：当文件就绪可以开始播放时运行的脚本（缓冲已足够开始时）
- ontimeupdate：当播放位置改变时（比如当用户快进到媒介中一个不同的位置时）运行的脚本。
- onended：当媒介已到达结尾时运行的脚本（可发送类似“感谢观看”之类的消息）。
二、使用图标插件Font-Awesome
- Font 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 class="player"> <video src="images/1.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> </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; } a{ 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"); } })
四、效果展示
