这周学习HTML5  

做了一个自定义播放器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>自定义播放器</title>
</head>
<style>
    #pro{
        margin-top: 20px;
        width: 200px;
        height: 30px;
        border: 1px solid;
        margin-bottom: 20px;
    }
    #pro-bar{
        height: 100%;
        width: 0%;
        background-color: skyblue;
    }
</style>
<body>
    <video id="kill" src="./杀死忍者.mp4"></video>
    <div id="pro">
        <div id="pro-bar"></div>
    </div>
    <button id="playBtn">播放</button>
    <button id="start">从头开始</button>
    <button id="loopBtn">开启循环</button>
    <button id="next">快进30s</button>
    <button id="pre">后退10s</button>

    <script>
        let kill = document.getElementById("kill");

        let pro = document.getElementById("pro");
        let proBar = document.getElementById("pro-bar");
        let playBtn = document.getElementById("playBtn");
        let start = document.getElementById("start");
        let loopBtn = document.getElementById("loopBtn");
        let next = document.getElementById("next");
        let pre = document.getElementById("pre");

        let test = function(){
            
            width2 = kill.currentTime/kill.duration;
            
            proBar.style.width = width2 *100+"%";
            
        }
        setInterval("test()",10);

        pro.addEventListener("click",function(){
            let x = event.offsetX;
            let percent = x/200;
            kill.currentTime = percent*kill.duration;
            console.log("接收到点击事件");
        },false);


        playBtn.addEventListener("click",function(){
            kill.play();
        },false);
        kill.addEventListener("click",function(){
            kill.pause();
        },false);
        start.addEventListener("click",function(){
            kill.currentTime = 0;
        },false);
        loopBtn.addEventListener("click",function(){
            kill.loop = true;
            console.log("循环已经开启！")
        },false);
        next.addEventListener("click",function(){
            kill.currentTime += 10;
        },false);
        pre.addEventListener("click",function(){
            kill.currentTime -= 10;
        },false);
    </script>
</body>
</html>

给每个按钮设置相对应的事件即可

currentTime 指的是当面播放的秒数 

可以设置为0 即重新播放 

loop为循环

 

进度条点击事件 即 

获取元素位于div的位置来设置 

根据百分比来控制进度条