自定义H5 video控制栏模块

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, $)

效果图: