javascript自定义视频进度条和音量进度条

1 创建元素

       //外层div

         let selfControl = document.createElement("div")

         selfControl.setAttribute("class", "control");

         // 播放条

         let selfProgress = document.createElement("div")

         selfProgress.setAttribute("class", "selfProgressFirstDiv");

         let selfProgressSpan = document.createElement("span")

         selfProgressSpan.setAttribute("class", "progress");

         // 音量

         let selfVolume = document.createElement("div")

         selfVolume.setAttribute("class", "selfVolume");

         let selfVolumeBar = document.createElement("div")

         selfVolumeBar.setAttribute("class", "selfVolumeBar");

         let selfVolumeBox = document.createElement("div")

         selfVolumeBox.setAttribute("class", "selfVolumeBox");

         // 音量显示

         let selfVolume_P = document.createElement("p")

         selfVolume_P.setAttribute("class", "selfVolume_P");

         selfVolume_P.innerHTML = "音量0%"

         // 时间

         let selfTimer = document.createElement("div")

         selfTimer.setAttribute("class", "timer");

         selfTimer.style.marginRight = "20px"

         let selfTimerStart = document.createElement("span")

         selfTimerStart.setAttribute("class", "progress_timer");

         selfTimerStart.innerHTML = "00:00:00" + "/"

         let selfTimerEnd = document.createElement("span")

         selfTimerEnd.setAttribute("class", "duration_timer");

         selfTimerEnd.innerHTML = "00:00:00"

2 处理时间和进度条点击事件

// 总时间

         selfVideo.addEventListener('canplay', function () {

             totalT = this.duration

             let videoDuration = FormatTime(totalT)

             selfTimerEnd.innerHTML = videoDuration

         })

         // 开始时间

         selfVideo.addEventListener('timeupdate', function () {

             presentT = this.currentTime

             let videoCurrent = FormatTime(presentT)

             selfTimerStart.innerHTML = videoCurrent + "/"

             // 设置进度的移动

             let percent = presentT / totalT * 100

             selfProgressSpan.style.width = percent + "%"

         })

         // 点击进度条selfProgress的事件

         selfProgress.addEventListener("click", function (e) {

             e = e || window.event

             let offsetX = e.offsetX

             let pecWidth = offsetX / selfProgress.offsetWidth * 100

             selfProgressSpan.style.width = pecWidth + "%"

             // 计算点击的百分比,,给视频重新赋值

             selfVideo.currentTime = totalT / 100 * pecWidth

             selfVideo.play()

         }}

// 处理时间格式

           function FormatTime(t) {

             let h = parseInt(t / 3600)

             h = h < 10 ? '0' + h : h

             let m = parseInt(t % 3600 / 60)

             m = m < 10 ? '0' + m : m

             let s = parseInt(t % 60)

             s = s < 10 ? '0' + s : s

             return h + ':' + m + ':' + s

     }

3 音量条的逻辑处理

     _Volume(selfVolume, selfVolume_P, selfVolumeBar, selfVolumeBox, selfVideo) {

         let boxL, newL, moveL, mouseX, left, bili, ismove;

         let cha = selfVolumeBar.offsetWidth - selfVolumeBox.offsetWidth;

         let index = 0; //标记状态

         let evt = new Event("change"); //本身的事件

         init();

         function init() {

             selfVolumeBox.addEventListener("mousedown", mouseDownclickHandler);

             selfVolumeBar.addEventListener("mousemove", mouseMoveclickHandler)

             selfVolumeBox.addEventListener("mouseup", mouseUpclickHandler);

         }

         function mouseDownclickHandler(e) {

             index = 1;

             boxL = selfVolumeBox.offsetLeft;

             mouseX = e.clientX; //鼠标按下拖动的位置

         }

         function mouseMoveclickHandler(e) {

             if (index === 1) {

                 moveL = e.clientX - mouseX; //鼠标移动

                 newL = boxL + moveL; //left值

                 //判断最小值与最大值

                 if (newL < 0) {

                     newL = 0;

                 }

                 //  console.log(newL, cha);

                 if (newL >= cha) {

                     newL = cha;

                 }

                 console.log(newL);

                 // 改变left值

                 selfVolumeBox.style.left = newL + 'px';

                 // 计算比例

                 bili = newL / cha * 100;

                 selfVolume_P.textContent = '音量' + Math.ceil(bili) + '%';

                 selfVideo.muted = false;

                 selfVideo.volume = bili / 100

                 evt.elem = this; //当前指向对象

                 document.dispatchEvent(evt); //朝谁发送抛发

             }

         }

         function mouseUpclickHandler(e) {

             index = 0;

             evt.elem = this; //当前指向对象

             document.dispatchEvent(evt); //朝谁发送抛发

         }

     }