html5视频播放器自定义控件未在全屏模式下显示

Question

我正在构建带有自定义控件的HTML5视频播放器。因此，我正在按照本教程building-custom-controls-for-html5-videos

当我进入全屏模式时，自定义控件不会显示。我也尝试过此问题change html5 video controls layout when fullscreen中给出的解决方案 但这对我也不起作用。

window.onload = function() {

    // Video
    var video = document.getElementById("video");

    // Buttons
    var playButton = document.getElementById("play-pause");
    var muteButton = document.getElementById("mute");
    var fullScreenButton = document.getElementById("full-screen");

    // Sliders
    var seekBar = document.getElementById("seek-bar");
    var volumeBar = document.getElementById("volume-bar");


    // Event listener for the play/pause button
    playButton.addEventListener("click", function() {
        if (video.paused == true) {
            // Play the video
            video.play();

            // Update the button text to 'Pause'
            playButton.innerHTML = "Pause";
        } else {
            // Pause the video
            video.pause();

            // Update the button text to 'Play'
            playButton.innerHTML = "Play";
        }
    });


    // Event listener for the mute button
    muteButton.addEventListener("click", function() {
        if (video.muted == false) {
            // Mute the video
            video.muted = true;

            // Update the button text
            muteButton.innerHTML = "Unmute";
        } else {
            // Unmute the video
            video.muted = false;

            // Update the button text
            muteButton.innerHTML = "Mute";
        }
    });


    // Event listener for the full-screen button
    fullScreenButton.addEventListener("click", function() {
        if (video.requestFullscreen) {
            video.requestFullscreen();
        } else if (video.mozRequestFullScreen) {
            video.mozRequestFullScreen(); // Firefox
        } else if (video.webkitRequestFullscreen) {
            video.webkitRequestFullscreen(); // Chrome and Safari
        }
    });


    // Event listener for the seek bar
    seekBar.addEventListener("change", function() {
        // Calculate the new time
        var time = video.duration * (seekBar.value / 100);

        // Update the video time
        video.currentTime = time;
    });


    // Update the seek bar as the video plays
    video.addEventListener("timeupdate", function() {
        // Calculate the slider value
        var value = (100 / video.duration) * video.currentTime;

        // Update the slider value
        seekBar.value = value;
    });

    // Pause the video when the seek handle is being dragged
    seekBar.addEventListener("mousedown", function() {
        video.pause();
    });

    // Play the video when the seek handle is dropped
    seekBar.addEventListener("mouseup", function() {
        video.play();
    });

    // Event listener for the volume bar
    volumeBar.addEventListener("change", function() {
        // Update the video volume
        video.volume = volumeBar.value;
    });
}

video::-webkit-media-controls-enclosure {
  display:none !important;
}

#video-container {
    width: 640px;
    height: 365px;
    position: relative;
}

#video-controls {
    z-index: 2147483647;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 5px;
    opacity: 0;
    -webkit-transition: opacity .3s;
    -moz-transition: opacity .3s;
    -o-transition: opacity .3s;
    -ms-transition: opacity .3s;
    transition: opacity .3s;
    background-image: linear-gradient(bottom, rgb(3,113,168) 13%, rgb(0,136,204) 100%);
    background-image: -o-linear-gradient(bottom, rgb(3,113,168) 13%, rgb(0,136,204) 100%);
    background-image: -moz-linear-gradient(bottom, rgb(3,113,168) 13%, rgb(0,136,204) 100%);
    background-image: -webkit-linear-gradient(bottom, rgb(3,113,168) 13%, rgb(0,136,204) 100%);
    background-image: -ms-linear-gradient(bottom, rgb(3,113,168) 13%, rgb(0,136,204) 100%);

    background-image: -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0.13, rgb(3,113,168)),
        color-stop(1, rgb(0,136,204))
    );
}

<!DOCTYPE html>
  <html lang="en">
    <head>
        <meta charset="utf-8">
        <title>HTML5 Video Demo</title>

        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <div id="video-container">
            <!-- Video -->
            <video id="video" width="640" height="365">
              <source src="videos/mikethefrog.webm" type="video/webm">
              <source src="videos/mikethefrog.ogv" type="video/ogv">
              <source src="videos/mikethefrog.mp4" type="video/mp4">
              <p>
                Your browser doesn't support HTML5 video.
                <a href="videos/mikethefrog.mp4">Download</a> the video instead.
              </p>
            </video>
            <!-- Video Controls -->
            <div id="video-controls">
                <button type="button" id="play-pause" class="play">Play</button>
                <input type="range" id="seek-bar" value="0">
                <button type="button" id="mute">Mute</button>
                <input type="range" id="volume-bar" min="0" max="1" step="0.1" value="1">
                <button type="button" id="full-screen">Full-Screen</button>
            </div>
        </div>

        <script src="script.js"></script>
    </body>
  </html>

我对此进行了很多搜索，但未找到任何解决方案。因此，任何指针都将真正有帮助。