JavaScript案例：H5 video自定义控制器

video作为h5中新增的标签，定义视频，比如电影片段或其他视频流。
video在各个浏览器中的默认控件都不太一样，还不太好看，所以就得自定义
分享一个自己写的video控件，实现功能包括暂停/播放、进度条控制、音量调节、时间显示、全屏

全屏

html

<div class="video">
    <!-- 视频播放区 -->
    <video id="video1" src="source/jslm.mp4"></video>
    <!-- 遮罩层 -->
    <div class="cover">
        <!-- 居中的播放暂停状态 -->
        <div id="playStatus"></div>
        <!-- 控件部分 -->
        <div class="controls">
            <!-- 控件部分中的播放暂停状态 -->
            <div id="contPlayStatus"></div>
            <div id="currentTime">00:00:00</div>
            <!-- 进度条 -->
            <input id="progressBar" type="range" name="" min="0" max="1000" value="0">
            <div id="duration">00:00:00</div>
            <div id="volume"></div>
            <div id="volumeInput">
                <input id="volumeInputRange" type="range" name="" min="0" max="100" value="100">
            </div>
            <div id="fullScreen"></div>
        </div>
    </div>
</div>

简单样式css

* {
    margin: 0;
    padding: 0;
    outline: none;
    box-sizing: border-box;
}

.video {
    width: 1080px;
    height: 460px;
    margin: 0 auto;
    position: relative;
}

.video video {
    /* width: 1080px;
    height: 460px; */
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    height: 100%;
    /* object-fit: contain; */
    object-fit: scale-down;
    object-position: center center;
}

video::-webkit-media-controls {
    /* 去掉全屏时显示的自带控制条 */
    display: none !important;
}

.cover {
    width: 1080px;
    height: 460px;
    background-color: rgba(116, 116, 116, 0.3);
    position: absolute;
    left: 0;
    top: 0;
}

#playStatus {
    width: 64px;
    height: 64px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-image: url(../img/play.png);
}

.controls {
    width: 1080px;
    height: 64px;
    background-image: linear-gradient(transparent, #70939b);
    position: absolute;
    bottom: 0;
    display: flex;
    justify-content: space-around;
}

#contPlayStatus {
    width: 32px;
    height: 32px;
    background-image: url(../img/play32.png);
    position: relative;
    top: 16px;
    /* border: 1px solid red; */
}

#currentTime {
    width: 84px;
    height: 64px;
    /* border: 1px solid red; */
    text-align: center;
    line-height: 64px;
    font-size: 16px;
    color: #52d3f0;
}

#progressBar {
    /* 进度条样式 */
    -webkit-appearance: none;
    width: 700px;
    height: 5px;
    /* border: 1px solid red; */
    position: relative;
    top: 30px;
    background-color: #eee;
    border-radius: 2.5px;
}

#progressBar::-webkit-slider-thumb {
    /* 进度条滑块样式 */
    -webkit-appearance: none;
    width: 12px;
    height: 12px;
    cursor: pointer;
    background: none repeat scroll 0 0 #52d3f0;
    border-radius: 6px;
}

#duration {
    width: 84px;
    height: 64px;
    /* border: 1px solid red; */
    text-align: center;
    line-height: 64px;
    font-size: 16px;
    color: #52d3f0;
}

#volume {
    width: 32px;
    height: 32px;
    /* border: 1px solid red; */
    position: relative;
    top: 16px;
    background-image: url(../img/volume.png);
}

#volumeInput {
    width: 32px;
    height: 120px;
    position: absolute;
    left: 940px;
    top: -105px;
    display: none;
}

#volumeInputRange {
    transform: rotate(270deg);
    -webkit-appearance: none;
    width: 120px;
    height: 5px;
    /* border: 1px solid red; */
    position: absolute;
    left: 0px;
    top: 55px;
    background-color: #eee;
    border-radius: 2.5px;
}

#volumeInputRange::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 12px;
    height: 12px;
    cursor: pointer;
    background: none repeat scroll 0 0 #52d3f0;
    border-radius: 6px;
}

#volume:hover+#volumeInput {
    display: block;
}

#volumeInput:hover {
    display: block;
}

#fullScreen {
    width: 32px;
    height: 32px;
    /* border: 1px solid red; */
    position: relative;
    top: 16px;
    background-image: url(../img/fullscreen.png);
}

js部分

// 需要获取的元素
var divVideo = document.getElementsByClassName("video")[0];
var divCover = document.getElementsByClassName("cover")[0];
var video1 = document.getElementById("video1");
var playStatus = document.getElementById("playStatus");
var controls = document.getElementsByClassName("controls")[0];
var contPlayStatus = document.getElementById("contPlayStatus");
var currentTime = document.getElementById("currentTime");
var progressBar = document.getElementById("progressBar");
var duration = document.getElementById("duration");
var volume = document.getElementById("volume");
var fullScreen = document.getElementById("fullScreen");

divVideo.addEventListener("mouseenter", function() {
    divCover.style.display = "block";
})

divVideo.addEventListener("mouseleave", function() {
    divCover.style.display = "none";
})

video1.addEventListener("play", function() {
    playStatus.style.backgroundImage = "url(img/pause.png)";
    contPlayStatus.style.backgroundImage = "url(img/pause32.png)"
})

video1.addEventListener("pause", function() {
    playStatus.style.backgroundImage = "url(img/play.png)";
    contPlayStatus.style.backgroundImage = "url(img/play32.png)";

})

playStatus.addEventListener("click", play_pause);
contPlayStatus.addEventListener("click", play_pause);

setInterval(function() {
    progressBar.value = video1.currentTime / video1.duration * 1000;
    currentTime.innerHTML = getTime(video1.currentTime);
    duration.innerHTML = getTime(video1.duration);
}, 1000)

progressBar.addEventListener("input", function() {
    video1.currentTime = video1.duration * (progressBar.value / 1000);
    video1.play();
})

var currVolume;

volume.addEventListener("click", function() {
    if (video1.volume != 0) {
        currVolume = video1.volume;
        video1.volume = 0;
        volumeInputRange.value = 0;
        this.style.backgroundImage = "url(img/volumeoff.png)";
    } else {
        video1.volume = currVolume;
        volumeInputRange.value = currVolume * 100;
        this.style.backgroundImage = "url(img/volume.png)";
    }
})

video1.volume = 0.3;
volumeInputRange.value = 30;
volumeInputRange.addEventListener("input", function() {
    video1.volume = Number(this.value) / 100;
    volume.style.backgroundImage = video1.volume == 0 ? "url(img/volumeoff.png)" : "url(img/volume.png)";
})

var fullScreenStatus = false;
fullScreen.addEventListener("click", function() {
    if (!fullScreenStatus) {
        var body = document.body;
        body.webkitRequestFullScreen();
        divVideo.style.width = innerWidth + "px";
        divVideo.style.height = innerWidth / (2538 / 1080) + "px";
        divVideo.style.position = "absolute";
        divVideo.style.left = "50%";
        divVideo.style.top = "50%";
        divVideo.style.transform = "translate(-50%, -50%)";
        divCover.style.width = innerWidth + "px";
        divCover.style.height = innerWidth / (2538 / 1080) + "px";
        controls.style.width = innerWidth + "px";
        var num = innerWidth - 1100;
        progressBar.style.width = parseInt(getComputedStyle(progressBar).width) + num + "px";
        volumeInput.style.left = parseInt(getComputedStyle(volumeInput).left) + num + 15 + "px";
        fullScreenStatus = true;
    } else {
        document.webkitCancelFullScreen();
        divVideo.style.width = "";
        divVideo.style.height = "";
        divVideo.style.position = "";
        divVideo.style.left = "";
        divVideo.style.top = "";
        divVideo.style.transform = "";
        divCover.style.width = "";
        divCover.style.height = "";
        controls.style.width = "";
        var num = innerWidth - 1100;
        progressBar.style.width = "";
        volumeInput.style.left = "";
        fullScreenStatus = false;
    }
})

function play_pause() {
    if (video1.paused) {
        video1.play();
        audio1.pause();
        check_box.checked = false;
    } else {
        video1.pause();
    }
}

function getTime(time) {
    let hour = Math.floor(time / 3600) < 10 ? "0" + Math.floor(time / 3600) : Math.floor(time / 3600);
    let min = Math.floor(time % 3600 / 60) < 10 ? "0" + Math.floor(time % 3600 / 60) : Math.floor(time % 3600 / 60);
    var sec = Math.floor(time % 60) < 10 ? "0" + Math.floor(time % 60) : Math.floor(time % 60);
    return hour + ":" + min + ":" + sec;
}