H5不依赖controls,自定义视屏导航栏

自定义视屏导航栏，可根据不同需求修改

    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .video_player {
            position: relative;
            width: 800px;
            height: 500px;
            margin: 0px auto;
        }

        video {
            position: absolute;
            top: 0;
            left: 0;
            width: 800px;
            height: 500px;
        }

        .menu {
            position: absolute;
            width: 100%;
            height: 50px;
            background-color: rgba(0, 0, 0, .8);
            bottom: 50px;
            display: none;
        }

        .play {
            position: absolute;
            top: calc(50% - 15px);
            width: 50px;
            height: 30px;
            border: 1px solid white;
            text-align: center;
            line-height: 30px;
            color: white;
            margin-left: 20px;
            border-radius: 5px;
            cursor: pointer;

        }

        .time {
            position: absolute;
            top: calc(50% - 15px);
            width: 100px;
            height: 30px;
            border: 1px solid white;
            text-align: center;
            line-height: 30px;
            color: white;
            margin-left: 120px;
            border-radius: 5px;
            cursor: pointer;
        }

        .progress_bar {
            position: absolute;
            width: 100%;
            height: 2px;
            background: gray;
            left: 0px;
            top: -2px;
        }

        .progress_bar div {
            position: absolute;
            width: 120px;
            height: 2px;
            left: 0px;
            top: 0px;
            background-color: yellow;
        }

        .progress_bar i {
            position: absolute;
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: white;
            left: 120px;
            top: -2px;
        }

        .quick {
            position: absolute;
            top: calc(50% - 15px);
            width: 60px;
            height: 30px;
            border: 1px solid white;
            text-align: center;
            line-height: 30px;
            color: white;
            margin-left: 340px;
            border-radius: 5px;
            cursor: pointer;
        }

        .quick_list {
            position: absolute;
            width: 100px;
            height: 120px;
            background: rgba(0, 0, 0, .6);
            left: 320px;
            top: -120px;
            color: white;
            border-radius: 6px;
            cursor: pointer;
            text-align: center;
            display: none;
        }

        .quick_list li {
            position: relative;
            height: 30px;
            width: 100%;
            line-height: 30px;
            list-style: none;
        }

        .quick_list li:hover {
            color: green;
        }

        .vol_add {
            position: absolute;
            top: calc(50% - 15px);
            width: 20px;
            height: 30px;
            border: 1px solid white;
            text-align: center;
            line-height: 30px;
            color: white;
            margin-left: 520px;
            border-radius: 5px;
            cursor: pointer;
        }

        .vol_des {
            position: absolute;
            top: calc(50% - 15px);
            width: 20px;
            height: 30px;
            border: 1px solid white;
            text-align: center;
            line-height: 30px;
            color: white;
            margin-left: 550px;
            border-radius: 5px;
            cursor: pointer;
        }
        .full_screen {
            position: absolute;
            top: calc(50% - 15px);
            width: 50px;
            height: 30px;
            border: 1px solid white;
            text-align: center;
            line-height: 30px;
            color: white;
            margin-left: 650px;
            border-radius: 15px;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <div class="video_player">
        <video src="./3d旋转照片墙-魔方.mp4"></video>
        <div class="menu">
            <div class="play">播放</div>
            <div class="time"></div>
            <div class="progress_bar">
                <div></div>
                <i></i>
            </div>
            <div class="quick">倍数</div>
            <div class="quick_list">
                <ul>
                    <li>正常</li>
                    <li>X1.25</li>
                    <li>X1.5</li>
                    <li>X2</li>
                </ul>
            </div>
            <div class="vol_add">+</div>
            <div class="vol_des">-</div>
            <div class="full_screen">全屏</div>
        </div>
        <script>
            var videoPlayer = document.getElementsByClassName('video_player')[0];
            var menu = document.getElementsByClassName('menu')[0];
            var video = document.getElementsByTagName('video')[0]
            var play = document.getElementsByClassName('play')[0];
            var time = document.getElementsByClassName('time')[0];
            var progressBar = document.getElementsByClassName('progress_bar')[0];
            var quick = document.getElementsByClassName('quick')[0];
            var quickList = document.getElementsByClassName('quick_list')[0];
            var volAdd = document.getElementsByClassName('vol_add')[0];
            var volDes = document.getElementsByClassName('vol_des')[0];
            var fullScreen = document.getElementsByClassName('full_screen')[0];




            videoPlayer.onmouseenter = function () {
                menu.style.display = 'block';
            }
            videoPlayer.onmouseleave = function () {
                menu.style.display = 'none';
            }
            //视频播放器的开始于暂停   video的paused检查是否处于暂停状态，play()方法开始播放，pause()方法暂停播放
            play.onclick = function () {
                if (video.paused) {
                    video.play();
                    play.innerHTML = '暂停'
                } else {
                    video.pause();
                    play.innerHTML = '播放'
                }

            }
            /* 视频播放器的进度条 */
            progressBar.onmouseenter = function () {
                progressBar.style.height = '16px';
                progressBar.style.top = '-16px';
                progressBar.getElementsByTagName('div')[0].style.height = '16px';
                progressBar.getElementsByTagName('i')[0].style.height = '20px';
            }
            progressBar.onmouseleave = function () {
                progressBar.style.height = '2px';
                progressBar.style.top = '-2px';
                progressBar.getElementsByTagName('div')[0].style.height = '2px';
                progressBar.getElementsByTagName('i')[0].style.height = '6px';
            }
            progressBar.onclick = function (e) {
                var location = e.layerX;
                var width = progressBar.clientWidth;
                var targetTime = location / width * video.duration;
                video.currentTime = targetTime;
            }

            /* 视频播放器的调节倍数 */
            quick.onclick = function () {
                quickList.style.display = 'block';
            }
            quickList.onmouseleave = function () {
                quickList.style.display = 'none'
            }
            var liList = quickList.getElementsByTagName('ul')[0].getElementsByTagName('li')
            for (var i = 0; i < liList.length; i++) {
                liList[i].index = i;
                liList[i].onclick = function () {
                    if (this.index == 0) {//正常
                        video.playbackRate = 1;  // video上控制速度的属性
                        quick.innerHTML = '倍速'
                    } else if (this.index == 1) {
                        video.playbackRate = 1.25
                        quick.innerHTML = 'X1.25'
                    } else if (this.index == 2) {
                        video.playbackRate = 1.5
                        quick.innerHTML = 'X1.5'
                    } else {
                        video.playbackRate = 2
                        quick.innerHTML = 'X2'
                    }
                }
            }


            /*  视频播放器的音量调节*/
            volAdd.onclick = function () {
                video.volume = video.volume + 0.1 >= 1 ? 1 : video.volume + 0.1;
               
            }
            volDes.onclick = function(){
                video.volume = video.volume - 0.1 <= 1 ? 0 : video.volume - 0.1;
            }

            /* 视频全屏播放 */
            fullScreen.onclick = function(){
                var dom = document.documentElement;
                dom.requestFullscreen(); //让网页全屏
                videoPlayer.style.width = window.screen.width + 'px';
                videoPlayer.style.height = window.screen.height + 'px';
                video.style.width = window.screen.width + 'px';
                
                video.style.height = window.screen.height + 'px';

            }


            /*视频播放器的时间进度 video的两个属性 duraton 总时间(秒数)  currentTime 当前的时间（秒数）  */
            setInterval(function () {
                var total = video.duration;
                var nowTime = video.currentTime;
                time.innerHTML = parseInt(nowTime / 60) + ":" + parseInt(nowTime % 60) + ' / ' + parseInt(total / 60) + ":" + parseInt(total % 60);

                var width = nowTime / total * progressBar.clientWidth;
                progressBar.getElementsByTagName('div')[0].style.width = width + 'px';
                progressBar.getElementsByTagName('i')[0].style.left = width + 'px';
            }, 1000)



        </script>
    </div>