这个网页怎么做,获取访问页面次数,通过进度条调整视频大小,并获取当前播放到几秒了

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="box"></div>
		<script type="text/javascript">
			function setStorage() {
				if(localStorage.counter) {
					localStorage.counter = Number(localStorage.counter) + 1;
				} else {
					localStorage.counter = 1;
				}
				return localStorage.counter;
			}
			var counter = setStorage();
			var oBox = document.getElementById('box');
			oBox.innerHTML = "您是第" + counter + "次访问!";
		</script>
		<p align="center">video size:<progress id="progress" max="1" value=""></progress></p></body>
		<div style="margin:0 auto;text-align:center;"><video id="video-active" class="video-active" controls="controls">
			<source src="video/米卡-创造营2021学员-So Sick.mp4" type="video/mp4"></source>
		</video></div>
		<div align="center">当前播放时间:<span id="video-time">0</span>秒</div>
	</body>
</html>

怎么让访问次数居中,数字变红,video size怎么写拖动才可以调整视频大小

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="box" style="text-align: center;">您是第<span id="count" style="color:red"></span>次访问!</div>
		
		<p align="center">video size: <input id="range" onchange="change()" type="range" min="100" max="500" step="10"></p></body>
		<div style="margin:0 auto;text-align:center;"><video id="video-active" style="width:auto;height:auto" class="video-active" controls="controls">
			<source src="video/米卡-创造营2021学员-So Sick.mp4" type="video/mp4" type="video/mp4"></source>
		</video></div>
		<div align="center">当前播放时间:<span id="video-time">0</span>秒</div>
        <script type="text/javascript">
			function setStorage() {
				if(localStorage.counter) {
					localStorage.counter = Number(localStorage.counter) + 1;
				} else {
					localStorage.counter = 1;
				}
				return localStorage.counter;
			}
			var counter = setStorage();
			var oCount = document.getElementById('count');
			oCount.innerHTML = counter;
            oVideo=document.getElementById('video-active')
            oRange=document.getElementById('range')
            oVideo.style.width=oRange.value+'px'
            function change(){
                oVideo.style.width=oRange.value+'px'
            }
            oVideo.ontimeupdate=function(){
                document.getElementById('video-time').innerHTML=Math.floor(this.currentTime);
            };
            
		</script>
	</body>
</html>