js jq 判断视频播放进度

原创已于 2022-11-14 13:41:18 修改 · 置顶 · 2.3k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#js #html

于 2020-06-03 15:34:48 首次发布

js 专栏收录该内容

3 篇文章

订阅专栏

这篇博客主要介绍如何利用JavaScript和jQuery库来监测HTML视频元素的播放进度，为用户提供更丰富的交互体验。

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

</div>

PHP老头博客网：https://www.laotouw.com