JS逐步教你做(自己版本)的视频播放器(我先声明,step我不懂是什么意思,所以没用)

<h1>分享给大家的自定义播放器</h1>
	<video src="videos/gone.mp4" id="video" class="screen" poster="img/poster.png">
	</video>
	<div class="controls">
		<button class="btn" id="play">
			<i class="fa fa-play fa-2x"></i>
		</button>
		<button class="btn" id="stop">
			<i class="fa fa-stop fa-2x"></i>
		</button>
		<input type="range" id="progress" class="progress" min="0" max="100" value="0">
	<span class="timestamp" id="timestamp">00:00</span>
	</div>

*{padding: 0px;margin: 0px;}
    	body
    	{
    		background-color: #666;
    		display: flex;
    		flex-direction: column;
    		align-items: center;
    		justify-content: center;
    		max-height: 100vh;/*记住这里是max啊*/
    	}
	h1 {
	  color: #fff;
	}
	.screen
	{
		cursor: pointer;
		widows: 60%;
		background: #666;
		border-top-left-radius: 10px;
		border-top-right-radius: 10px;
	}
	.controls
	{
		background-color: #333;
		  color: #fff;
		  width: 60%;
		  border-bottom-left-radius: 10px;
		  border-bottom-right-radius: 10px;
		  display: flex;
		  justify-content: center;
		  align-items: center;
		  padding: 10px;
	}
	.controls .btn {
	  border: 0;
	  margin-left: 5px;
	  background-color: transparent;
	  cursor: pointer;
	}
	.controls .fa-play {
	  color: #28a745;
	}

	.controls .fa-stop {
	  color: #dc3545;
	}
	.controls .fa-pause {
		  color: #fff;
		}
		.btn:focus
		{
			outline: 0;
		}
		@media (max-width: 800px)
		{
			.screen,.controls
			{
				width: 90%;
			}
		}	

.justify-content: center;
		  align-items: center;

.controls .btn {
	  border: 0;
	  margin-left: 5px;
	  background-color: transparent;
	  cursor: pointer;
	}

.controls .fa-play {
	  color: #28a745;
	}

	.controls .fa-stop {
	  color: #dc3545;
	}
	.controls .fa-pause {
		  color: #fff;
		}

<i class="fa fa-play fa-2x"></i>

btn:focus
		{
			outline: 0;
		}

@media (max-width: 800px)
		{
			.screen,.controls
			{
				width: 90%;
			}
		}	

// 获取节点
		const video = document.getElementById("video");
		const play = document.getElementById("play");
		const stop = document.getElementById("stop");
		const progress = document.getElementById("progress");
		const timestamp = document.getElementById("timestamp");
		video.addEventListener("click",toggleVideoStatus);
		video.addEventListener("pause", updatePlayIcon);
		video.addEventListener("play", updatePlayIcon);
		video.addEventListener("timeupdate", updateProgress);
		play.addEventListener("click", toggleVideoStatus);//是用来播放的.按按钮也能播放.
		stop.addEventListener("click", stopVideo);//这个是初始化为0的,并且停止掉。
		progress.addEventListener("change", setVideoProgress);//这个重要是进度条改变的时候的(拖动的时候).
		//以下思路:看见了屏幕在暂停,点击了就播放,看见屏幕在播放,点击了就暂停。
		function toggleVideoStatus()// 点击播放或者暂停
		{
			if(video.paused)//屏幕
			{
				video.play();
			}
			else//屏幕
			{
				video.pause();
			}
		}
		function updatePlayIcon()// 点击video图标更新
		{
			if(video.paused)
			{
				play.innerHTML=`<i class="fa fa-play fa-2x"></i>`;//图标的变化
			}
			else
			{
				play.innerHTML=`<i class="fa fa-pause fa-2x"></i>`;//图标的变化
			}
		}
		function updateProgress()
		{
			progress.value=(video.currentTime/video.duration)*100;
			/*举个例子把.好吧.假如00:01/00:50=1/50=0.02;0.02*100=2%.假如这个进度条有200px;200*2/100=4px就行了啊.4px就是总时间为50秒的1秒;慢慢来哈，我说的是对的.*/

			//获取分钟
			let mins=Math.floor(video.currentTime/60);//floor是因为获取的是整数部分.
			//注意以下,如果是分钟小于10就往前面加个0;
			if(mins<10)
			{
				mins="0"+String(mins);//转换为字符串
			}
			  //  获取秒数
			  let secs=Math.floor(video.currentTime%60);//必须是开始的秒钟哈,结束没什么鸟用.
			  if(secs<10)
			  {
			  	secs="0"+String(secs);//转换成字符串来与字符串0拼接.
			  }
			  timestamp.innerHTML=`${mins}:${secs}`;
		}
		function  stopVideo()
		{
			video.currentTime=0;
			video.pause();
		}
		function setVideoProgress()
		{
			video.currentTime=(+progress.value*video.duration)/100;/*+变成是因为变化只能整数啊,字符串不能啊.*/
		}/*当前时间是比如50秒,1秒4px把。然后是4*50=200;200/100=2;2代表2%;2%代表走了总长度的2%;代表4px;代表走了一秒了.对的哦慢慢看*/

function toggleVideoStatus()//video的播放与暂停。
		{
			if(video.paused)
			{
				video.play();
			}
			else
			{
				video.pause();
			}
		}

video.addEventListener("pause", updatePlayIcon);
video.addEventListener("play", updatePlayIcon);

function updatePlayIcon()//左下角的右边的切换。
		{
			if(video.paused)
			{
				play.innerHTML=`<i class="fa fa-play fa-2x"></i>`;
			}
			else
			{
				play.innerHTML=`<i class="fa fa-pause fa-2x"></i>`;
			}
		}

video.addEventListener("timeupdate", updateProgress);

function updateProgress()//进度条一秒一秒的进度更新,显示的时间也一秒一秒的走。
		{
			progress.value=(video.currentTime/video.duration)*100;
			let mins=Math.floor(video.currentTime/60);
			
			if(mins<10)
			{
				mins="0"+String(mins);
			}
			  
			  let secs=Math.floor(video.currentTime%60);
			  if(secs<10)
			  {
			  	secs="0"+String(secs);
			  timestamp.innerHTML=`${mins}:${secs}`;
		}
		timestamp.innerHTML=`${mins}:${secs}`;
		}

let mins=Math.floor(video.currentTime/60);
			
			if(mins<10)
			{
				mins="0"+String(mins);
			}
			  
			  let secs=Math.floor(video.currentTime%60);
			  if(secs<10)
			  {
			  	secs="0"+String(secs);
			  timestamp.innerHTML=`${mins}:${secs}`;
		}
		timestamp.innerHTML=`${mins}:${secs}`;

stop.addEventListener("click", stopVideo);

function  stopVideo()//点击后为00：00，并且video为上面一点那个图片.
		{
			video.currentTime=0;
			video.pause();
		}

progress.addEventListener("change", setVideoProgress);

function setVideoProgress()
		{
			video.currentTime=(+progress.value*video.duration)/100;
		}