这周学习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的位置来设置
根据百分比来控制进度条