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

<!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>

发布了35 篇原创文章 · 获赞 4 · 访问量 3万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 编程工作室 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览