<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link
href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
rel="stylesheet"
integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN"
crossorigin="anonymous"
/><!--播放与暂停的按钮的图标-->
<link rel="stylesheet" type="text/css" href="css/progress.css" /><!--缺少了这个会暂停播放进度条变小.-->
<style type="text/css">
*{
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%;
}
}
</style>
</head>
<body>
<h1>分享给大家的自定义播放器</h1>
<video src="videos/gone.mp4" id="video" class="screen" poster="img/poster.png"><--poster是图片是播放之前预览的图片,src是声音的路径-->
</video>
<div class="controls">
<button class="btn" id="play">
<i class="fa fa-play fa-2x"></i><!--fa-2x变大,fa-play播放按钮,fa图标第一必须加的.-->
</button>
<button class="btn" id="stop">
<i class="fa fa-stop fa-2x"></i><!--fa-stop暂停按钮 放大-->
</button>
<input type="range" id="progress" class="progress" min="0" max="100" value="0" step="0.1">
<!--我了解了一下:step不懂.-->
<span class="timestamp" id="timestamp">00:00</span>
</div>
<script type="text/javascript">
// 获取节点
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;代表走了一秒了.对的哦慢慢看*/
</script>
</body>
</html>
JS自己做视频播放器
猜你喜欢
转载自blog.csdn.net/qq_37805832/article/details/109127832
今日推荐
周排行