javascript - 如何在我的视频播放器（如 youtube 播放器）中创建流畅的搜索器

Question

我创建了一个播放器，我希望它作为 youtube 播放器流畅。但是我的播放器不是那么流畅。如果我将鼠标按下滑块并 mousemove 它并且它会滑动但在鼠标向上后它不会停止 mousemove 的滑动并且它不会给出与我预期的相同的结果，它也会产生一些类似错误

window.onload = function(){
    var music = document.getElementById('music');
    music.src = 'https://fr01.mp3snow.com/4d1c6fa75beebf67d9969/Charlie%20Puth%20-%20We%20Don%20t%20Talk%20Anymore%20feat.%20Selena%20Gomez.mp3'
    setTimeout(()=>{
    
        var play = document.getElementById('playpause')
    

    
    
        //slider for music
        var slider = document.getElementById('slider');
        //slider Container for slider in music player
        var sliderCon = document.getElementById('sliderCon');
        var clicked = false;
        var body = document.querySelector('body');
        var timer = document.getElementById('time');
        var durat = document.getElementById('duration');
        sliderCon.onmousedown = (e) => {
            music.currentTime = (e.offsetX/sliderCon.offsetWidth)*music.duration;
            clicked = true;
        }
        window.onmousemove = (e) =>{
            if(clicked == true){
                music.currentTime = (e.offsetX/sliderCon.offsetWidth)*music.duration;
                if(music.ended == true){
                    music.play()
                }
                body.style.cursor = 'grabbing' ;
            }
            window.onmouseup = () => {
                clicked = false;
                body.style.cursor = 'inherit';
                
            }
        }
        
        
        
        function timing(totaltime){
            if (totaltime>60){
                var minute = Math.floor(totaltime/60)
                var second = Math.floor(totaltime%60)
                if(minute>9){
                    var time;
                    if (second >9){
                        time = minute+':'+second;
                    }else{
                        time = minute+':'+'0'+second;
                    }
                }else if (minute<10){
                    var time;
                    if (second >9){
                        time = '0'+minute+':'+second;
                    }else{
                        time = '0'+minute+':'+'0'+second;
                    }
                }
            }
            else{
                if (totaltime<10){
                    var time = '00:0'+Math.floor(totaltime)
                }else{
                    var time = '00:'+Math.floor(totaltime)
                }
            }
            return time;
        }


          music.ontimeupdate = () =>{
            var sliderWidth = (music.currentTime/music.duration)*100;
            slider.style.width = sliderWidth+'%';
        
            timer.innerHTML = timing(music.currentTime)
        
            durat.innerHTML = timing(music.duration)
        

        }
        
        
        
        
        
        play.onselect = () =>{
        document.click();
        }
        play.onclick = (e) => {
            if(music.paused == true || music.ended == true){
                music.play();
                play.innerHTML = '<i class="fas fa-pause"></i>';
            }else if (music.paused == false || music.ended == false){
                music.pause();
                play.innerHTML = '<i class="fas fa-play"></i>';
        
            }
        }
        
        window.onkeydown = (key) => {
            if (key.key == 'ArrowRight'){
                music.currentTime += 5
            }
            if (key.key == 'ArrowLeft') {
                music.currentTime -= 5
            }
            if (key.key == ' ') {
                if(music.paused == true || music.ended == true){
                    music.play();
                    play.innerHTML = 'PAUSE';
                }else if (music.paused == false || music.ended == false){
                    music.pause();
                    play.innerHTML = 'PLAY';
            
                } 
            }
            if (key.key == 'ArrowUp'){
        
                if(music.volume < 1){
                    music.volume +=0.1;
                }
            }
            if (key.key == 'ArrowDown'){
                if(music.volume > 0.1){
                    music.volume -=0.1;
                }
            }
            if (key.code == 'NumpadAdd'){
                if (music.playbackRate < 2.0){
                    music.playbackRate += 0.1
                }
            }
            if (key.code == 'NumpadSubtract'){
                if (music.playbackRate > 0.1){
                    music.playbackRate -= 0.1
                }
            }
            if (key.key == 'h'){
                music.playbackRate = -1.0;
            }
        }
    
    },0)
    var loaded = document.getElementById('loaded');
    console.log(loaded)
    music.addEventListener('progress', function(e) {
        setTimeout(()=>{
            loaded.style.width = Math.round((this.buffered.end(0)/this.duration) * 100)+'%';

        },6)
      });

      
    }

*{
    margin: 0;
    padding: 0;
}
body{
    background-color: rgba(32, 29, 29, 0.89);
}
.playpause{
    color: rgb(255, 248, 248);
    left: 22%;
    position: relative;
    top: 16%;
    font-size: 3rem;
    font-family: sans-serif;
}
#duration{
    color: rgb(255, 248, 248);
    text-align: right;
    margin-right: 5px;
    
    font-size: 1rem;
    font-family: sans-serif;
    position: relative;
    top: -1rem;

}
#time{
    color: rgb(255, 248, 248);
    text-align: left;
    margin-left: 5px;
    font-size: 1rem;
    font-family: sans-serif;
    
}
#fornow{
    background-color: rgb(116, 116, 150);
    width: 80%;
    margin: 50px auto;
    height: 150px;
    
}
.sliderCon{
    width: 90%;
    margin: 0 auto;
    position: relative;
    top: 70px;
    background-color: rgb(197, 192, 192);
    height: 6px;
    transition: 0.3s;
}
.slider{
    position: relative;
    height: 100%;
    width: 0%;
    transition: 0.3s;
    background-color: rgb(228, 54, 54);

}
.sliderCon:hover{
    height: 10px;
    top: 67px;
    cursor: grab;
}

.thumb{
    width: 18px;
    height: 18px;
    background-color: rgb(228, 54, 54);
    position: absolute;
    margin-left: 98%;
    border-radius: 50%;
    margin-top: -5px;
    transition: 0.3s;
    pointer-events: none;
}
.sliderCon:hover .thumb{
    margin-left: 97%;
    width: 20px;
    height: 20px;
}
#loaded{
    background-color: rgba(226, 95, 95, 0.616);
    position: absolute;
    width: 0%;
    height: 100%;
}
#loading{
    width: 60px;
    height: 60px;
    background-color: transparent;
    margin: 0 auto;
    border: 5px solid;
    border-color: teal;
    transition: 1s;
    border-radius: 50%;
    animation: load 1s infinite;
    animation-fill-mode: both;
    border-top-color: tomato;
    display: none;


}
@keyframes load{
    to{
        transform: rotate(360deg);
    }
}
.yo{
    width: 75px;
    height: 75px; 
    background-color: cyan;
    margin: 0 auto;
    border-radius: 50%;
    position: relative;

}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Player</title>
    <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
    <link rel="stylesheet" href="./style.css">

</head>
<body>
    <audio src="./" id="music"></audio>

    <div class="player">
        <div id="fornow">
            <div class="sliderCon"  id="sliderCon">
                <div id="loaded">
                </div>
                <div class="slider" id="slider">
                    <div class="thumb"  id="thumb"></div>
                </div>
            </div>
            
        </div>
        <div id="time">00:00</div>
            <div id="duration">00:00</div>
            <div id="loading">

            </div>
        <div class="controls">
            <div class="backward"></div>
            <div class="yo">
            <div class="playpause" id="playpause"><i class="fas fa-play"></i></div>
        </div>
            <div class="forward"></div>
        </div>
    </div>
    

    <script src="./script.js"></script>
</body>
</html>

它是代码 你可以运行它，发现它不像 youtube 那样流畅，并且还声明 youtube 播放器不是 flash 那么我不知道的 youtube 播放器的秘密是什么？如果有人知道，请告诉我答案。对不起，这是我的个人项目，所以我没有评论它或命名它很好

谢谢你

标签： javascripthtmlcssfont-awesome