示例代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link href="http://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css"> <link href="http://www.likecs.com/css.css"> </head> <body> <h3>自定义视频播放器</h3> <div> <video src=""></video> <div> <a href="javascript:void(0);"></a> <a href="javascript:void(0);"></a> <div> <!--总时长--> <div></div> <!--用于点击选择进度--> <div></div> <!--已经加载的--> <div></div> <!--已经播放的时长--> </div> <div> <span>00:00:00</span> \ <span>00:00:00</span> </div> </div> </div> <script src="http://www.likecs.com/jquery.min.js"></script> <script> $(function () { // 获取播放器文件 var video = $("video")[0]; // 点击播放按钮播放视频文件 $(".switch").click(function () { if (video.paused) { video.play(); } else { video.pause(); } $(this).toggleClass("fa-play fa-pause"); }); // 全屏操作 $(".expand").click(function () { if (video.requestFullscreen) { video.requestFullscreen(); } else if (video.webkitRequestFullScreen) { video.webkitRequestFullScreen(); } else if (video.mozRequestFullScreen) { video.mozRequestFullScreen(); } else if (video.msRequestFullScreen) { video.msRequestFullScreen(); } }); function getTime(total) { var hour = Math.floor(total / 3600); hour = hour > 10 ? hour : "0" + hour; var min = Math.floor((total % 3600) / 60); min = min > 10 ? min : "0" + min; var sec = Math.floor((total % 3600) % 60); sec = sec > 10 ? sec : "0" + sec; return hour + ":" + min + ":" + sec; } // 当视频加载完成后显示视频 video.oncanplay = function () { this.style.display = "block"; // 根据视频总时长，获取时分秒 var total = getTime(this.duration); // 显示总时长 $(".totalTime").html(total); }; // 视频播放过程中，获取时分秒实时显示 // 如果修改currentTime值也会触发这个事件，也就是只要currentTime值变化，就会触发这个事件 video.ontimeupdate = function () { var current = getTime(this.currentTime); $(".currentTime").html(current); // 设置进度条 var percent = this.currentTime / this.duration * 100 + "%"; $(".elapse").css("width", percent); }; // 点击进度条跳播 $(".bar").click(function (e) { video.currentTime = e.offsetX / $(this).width() * video.duration; }); // 播放完成后回到最初位置 video.onended = function () { // 位置清零 video.currentTime = 0; // 播放暂停状态为播放 $(".switch").removeClass("fa fa-pause").addClass("fa fa-play"); }; }); </script> </body> </html>1、视频控制器中的播放暂停按钮和全屏按钮都是来自在线字体图标 font-awesome。
2、进度条一栏实际上有4层，处理可以看到的总时长，缓存时长，播放时长外还有一个最顶层的透明层，用于点击进度条实现跳变功能。