获取视频的进度，播放时间以及总长，并用进度条表示

最新推荐文章于 2025-03-24 17:30:19 发布

youngYellow

最新推荐文章于 2025-03-24 17:30:19 发布

阅读量2.4w

点赞数 2

分类专栏： htlm jsp 文章标签：视频控制进度条 html

本文链接：https://blog.csdn.net/sinat_35645479/article/details/79780923

版权

htlm 同时被 2 个专栏收录

10 篇文章

订阅专栏

jsp

3 篇文章

订阅专栏

<!DOCTYPE html>
<html>
  <head>
    <title>MyHtml.html</title>
	
    <meta name="keywords" content="keyword1,keyword2,keyword3">
    <meta name="description" content="this is my page">
    <meta name="content-type" content="text/html; charset=UTF-8">
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
  </head>
  <body>
  	<video  id="video-active"    class="video-active"    width="100%"    height="600"    controls="controls">
		<source src="hahah.mp4" type="video/mp4">
	</video>
    <div id="current">当前时长：0:00</div>
	<div id="duration">总时长：0:00</div>
	<span id="pro"></span>
	<div class="progress progress-striped active" style="width:100">
	    <span id="hyTime" class="progress-bar progress-bar-success"  role="progressbar"  aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"      >
	    </span>	   
	</div> <span id="hy" ></span>
	
	 <script type="text/javascript">
			$(document).ready(function(){
			
			  $("#video-active").on(
			    "timeupdate", 
			    function(event){
			      onTrackedVideoFrame(this.currentTime, this.duration);
			    });
			});
			function onTrackedVideoFrame(currentTime, duration){
			
			    $("#current").text(currentTime);
			    $("#duration").text(duration);
			    var a=currentTime/duration;
			    var b=(a*100).toFixed(0)+"%";
			    document.getElementById('hyTime').style.width=b;
			    $("#hy").text(b);
			    if(currentTime==duration){
			     $("#pro").text("(已完成)");
			    }
			}
		</script>
  </body>
</html>