jq 自定义video视频进度条

最新推荐文章于 2024-07-25 16:22:07 发布

xiaoshulin520

最新推荐文章于 2024-07-25 16:22:07 发布

阅读量1.9k

点赞数 2

分类专栏： jq 文章标签： video

本文链接：https://blog.csdn.net/u010022260/article/details/102503400

版权

jq 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

因工作需要，需要写一个自定义进度条，在网上找了一些，一直没找到如意的，看了一些网友的代码，然后自己重新写了一下。若有错误，欢迎指正。
参考了网友的代码：https://blog.csdn.net/weixin_33970449/article/details/85757733
注意：一定要在本地打开，不要通过HBuilder打开。

效果图：
在这里插入图片描述
全部代码：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style type="text/css">
		.videos {
			width: 800px;
			height: auto;
			margin: 0 auto;
		}
		
		.viede_box {
			height: 70px;
			background: #ccc;
			width: 100%;
			padding: 10px;
			box-sizing: border-box;
		}
		
		.video_control {
			width: 100%;
			height: 100%;
		}
		
		.video_control img {
			float: left;
		}
		
		.bideo_state,
		.vedeo_volume {
			cursor: pointer;
		}
		
		.video_Progress_mian {
			float: left;
			width: 650px;
			position: relative;
			height: 60px;
			margin-left: 10px;
			margin-right: 10px;
			padding-top: 12px;
		}
		.video_Progress_mian >span{position: absolute;top: 20px;}
		.start_span{left: 0;}
		.end_span{right: 0;}
		.video_Progress {
			cursor: pointer;
			width: 100%;
			 position: absolute;
			border-radius: 10px;
			background: #4a4a4a;
			height: 5px;
		}
		
		.start_time {
			float: left;
			margin-left: 10px;
		}
		
		.end_time {
			float: right;
			margin-right: 10px;
		}
		
		.video_bar {
			border-radius: 30px;
			background: #008000;
			height: 5px;
			width: 0px;
			 
		}
		.viedeo_spot{width: 10px;height: 10px;background: #007AFF;position: absolute;top: -2px;left: -5px;  border-radius: 10px;}
	 
	</style>

	<body>
		<div class="videos">
			<video id="videos" width="100%" height="450" >
				<source  src="img/may.mp4" type="video/mp4"></source>
				当前浏览器不支持 video直接播放，点击这里下载视频：
				<a href="myvideo.webm">下载视频</a>
			</video>
			<div class="viede_box">
				<div class="video_control">
					<img class="bideo_state" data-play="0" alt="播控" src="img/bf.png" />
					<div class="video_Progress_mian">
						<div class="video_Progress">
							<div class="video_bar"></div>
							<span class="viedeo_spot"></span>
						</div>
						<div class="video_pic">
							
						</div>
						<span class="start_time start_span">00:00</span>
						<span class="end_time end_span"></span>
					</div>
					<img src="img/yl.png" class="vedeo_volume " data-volume="1" alt="音量" />
				</div>
			</div>
			<button class="video_bnts" data-sum='80' >跳到80秒位置</button>
			<button class="video_bnts" data-sum='210' >跳到210秒位置</button>
		</div>
			
		
	</body>
	<script src="js/jquery-3.0.0.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		$(function() {
			var progressFlag;
			var setins=null;
			var videos = document.getElementById("videos")
			//获取视频总长度 解决NAN问题
			setins=setInterval(function(){
				if(videos.readyState==4){
					var durAtions = transTime(videos.duration);
					$(".end_time").text(durAtions)
					clearInterval(setins)
				}
			},100)
			
			// 点击进度条后用 定时器 获取当前视频播放位置/时间值
			function getDurationTims() {
				setInterval(function() {
					setTarttime()
 					setProgressText()
				}, 1000)
			}
			//获取当前视频播放时间值
			function setTarttime(){
				var starttimes = transTime(videos.currentTime);
					$(".start_time").text(starttimes);
			}
			
			//设置进度条
			function setProgressText(){
				if(videos.ended){
					$(".bideo_state").attr("src", "img/bf.png");
				}else{
					var percent =videos.currentTime / videos.duration;
	                $(".video_bar").css({width:percent * ($(".video_Progress").width())})
	                 $(".viedeo_spot").css({left:percent * ($(".video_Progress").width())-5})
				}
			}
			
			//鼠标点击进度条
			$(".video_Progress").click(function(e){
				  clearInterval(progressFlag);
				var v_w=$(".video_Progress").width();
				var length = e.pageX - $(".video_Progress").offset().left;
				console.log(length)
                var percent = length / v_w;
                $(".video_bar").css({width: percent * v_w - 2 })
                 videos.currentTime = percent * videos.duration;
                 progressFlag = setInterval(setProgressText, 60);
              	 setTarttime()
			})
			
			//时间转换
			function transTime(value) {
				var time = "";
				var h = parseInt(value / 3600);
				value %= 3600;
				var m = parseInt(value / 60);
				var s = parseInt(value % 60);
				if(h > 0) {
					time = formatTime(h + ":" + m + ":" + s);
				} else {
					time = formatTime(m + ":" + s);
				}
				return time;
			}
			//时间格式化
			function formatTime(value) {
				var time = "";
				var s = value.split(':');
				var i = 0;
				for(; i < s.length - 1; i++) {
					time += s[i].length == 1 ? ("0" + s[i]) : s[i];
					time += ":";
				}
				time += s[i].length == 1 ? ("0" + s[i]) : s[i];
				return time;
			}
			//点击播放按扭
			$(".bideo_state").click(function() {
				var dataPlay = $(".bideo_state").attr("data-play")

				if(dataPlay == 0) {
					$(".bideo_state").attr("src", "img/zt.png");
					$(".bideo_state").attr("data-play", "1")
					videos.play()
				} else {
					$(".bideo_state").attr("src", "img/bf.png");
					$(".bideo_state").attr("data-play", "0");
					videos.pause()
				}
				getDurationTims()
			})

			//设置音量
			$(".vedeo_volume").click(function() {
				var datavolume = $(".vedeo_volume").attr("data-volume")
				if(datavolume == 0) {
					$(".vedeo_volume").attr("data-volume", "1")
					$(".vedeo_volume").attr("src", "img/yl.png");
					videos.volume = 1;
				} else {
					$(".vedeo_volume").attr("data-volume", "0")
					$(".vedeo_volume").attr("src", "img/jy.png");
					videos.volume = 0;
				}
			})
			//点击图片跳到指定时间位置
			$(".video_bnts").click(function(){ 
				var vals = $(this).attr("data-sum")
			 	console.log($(this))
				  clearInterval(progressFlag);
                 videos.currentTime =vals
                 progressFlag = setInterval(setProgressText, 60);
              	 setTarttime()
			  
		})
		})
	</script>

</html>

每一块我都有写注释，目前没发现bug，如果有谁在这个基础上做的更好，欢迎微博私信我…… 微博，一起学习进步。