效果截图：
HTML代码：
<!DOCTYPE HTML>
<html>
<head>
<title>自定义H5 video控制条</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="author" content="Angbike"/>
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
</head>
<body>
<video style="width: 500px; " src="http://www.runoob.com/try/demo_source/movie.mp4" id="videoObj"></video>
<!--控制栏-->
<div id="controlBox" class="control-box">
<div>
<div id="playBtn" class="video-play"></div>
</div>
<div id="videoTime" class="video-time">00:00</div>
<div id="videoProgress" class="video-progress">
<span id="videoBar" class="video-bar"></span>
</div>
<div id="videoSound" class="video-soundon"></div>
<div id="videoFull" class="video-full"></div>
</div>
</body>
</html>CSS代码：
.control-box{height: 40px; width: 100%; background-color: #000000; display: flex; justify-content: center; align-items: center; text-align: center}
.control-box .video-play{border-top: 10px solid transparent; border-left: 20px solid #FFFFFF; border-bottom: 10px solid transparent}
.control-box .video-pause{width: 6px; height: 18px; border-left: 4px solid #FFFFFF; border-right: 4px solid #FFFFFF; width: 10px}
.control-box .video-time{color: #FFFFFF; width: 10%; font-size: 14px; height: 18px}
.control-box .video-progress{width: 55%; height: 8px; background: #fff; position: relative}
.control-box .video-bar{height: 100%; background: #444444; display: inline-block; position: absolute; left: 0; width: 0px;}
.control-box .video-soundon{width: 10px; height: 8px; border-right: 13px solid #FFFFFF; border-top: 6px solid rgba(255,255,255,0); border-bottom: 6px solid rgba(255,255,255,0)}
.control-box .video-soundoff{border-right: 13px solid #717171;}
.control-box .video-full{width: 15px; height: 15px; border: 3px solid #FFFFFF; margin-left: 13px}
.control-box .video-play:hover,
.control-box .video-pause:hover,
.control-box .video-soundon:hover,
.control-box .video-soundoff:hover,
.control-box .video-full{cursor: pointer}
@media only screen and (min-width: 280px) and (max-width: 640px){.control-box .video-time{width: 16%;}}JS代码：
(function(window, $){
var $controlBox // 外层盒子
,$video // 视频对象
,$play // 播放按钮
,$time // 播放时间
,$progress // 进度条
,$bar // 进度条效果
,$sound // 声音
,$full // 全屏
,playStatus = false; // 播放状态
videoControl = {
// 初始化
init: function(){
$controlBox = $("#controlBox");
$video = $("#videoObj");
$play = $("#playBtn");
$time = $("#videoTime");
$progress = $("#videoProgress");
$bar = $("#videoBar");
$sound = $("#videoSound");
$full = $("#videoFull");
$video[0].control = false;
var vw = $("#videoObj").width();
$("#controlBox").css("width", vw);
},
// 视频播放
videoPlay: function(){
// 判断播放状态
if($video[0].paused){
$play.removeClass("video-play").addClass("video-pause");
$video[0].play();
playStatus = true;
} else {
$play.removeClass("video-pause").addClass("video-play");
$video[0].pause();
playStatus = false;
}
},
// 监听视频播放位置改变 用于计算播放时间
videoTimeUpdata: function(){
// 视频当前播放的位置
var currentTime = parseInt($video[0].currentTime);
// 换算
var videoMinute = parseInt(currentTime / 60);
if(videoMinute == 0){
if (currentTime < 10) {
currentTime = "0" + currentTime;
}
videoMinute = "00:" + currentTime;
}else{
var currentTime = currentTime % 60;
if (currentTime < 10) {
currentTime = "0" + currentTime;
}
videoMinute = videoMinute + ":" + currentTime;
}
// 添加时间到页面
$time.html(videoMinute);
// 视频的长度(秒)
var videoLength = $video[0].duration;
// 视频播放时间 ÷ 视频总长度
var scales = $video[0].currentTime / videoLength;
var left = $progress[0].offsetWidth * scales;
// 设置进度偏移
$bar.css("width", left + "px");
},
// 全屏
fullScreen: function(){
var ele = $video[0];
if (ele.requestFullscreen){
ele.requestFullscreen();
}else if(ele.mozRequestFullScreen){
ele.mozRequestFullScreen();
}else if(ele.webkitRequestFullScreen){
ele.webkitRequestFullScreen();
}
},
// 关闭打开声音
soundChange: function(){
if(playStatus){
if(!($video[0].muted)){
$video[0].muted = true;
$sound.addClass("video-soundoff");
}else{
$video[0].muted = false;
$sound.removeClass("video-soundoff");
}
}
},
// 监听视频是否播放完成
videoEnded: function(){
if($video[0].ended){
$play.removeClass("video-pause").addClass("video-play");
$video[0].pause();
$time.html("00:00");
$bar.css("width", "0px");
playStatus = false;
}
},
}
$(function(){
videoControl.init();
$play.on("click", videoControl.videoPlay); // 播放
$video.on("timeupdate", videoControl.videoTimeUpdata); // 监听播放位置发生改变
$video.on("ended", videoControl.videoEnded); // 监听视频播放完成
$full.on("click", videoControl.fullScreen); // 全屏
$sound.on("click", videoControl.soundChange); // 声音关闭或打开
})
})(window, $)