如何在 HTML5 视频标签中隐藏视频加载微调器？

Question

问题在于 3g 连接速度较慢，即使视频已加载并正在播放，它也会持续显示微调器。

代码：

<video src="d3cvwyf9ksu0h5.cloudfront.net/answer-1530971608.mp4" preload="auto" autoplay controls controlslist="nodownload" style="width: 100%; height: 100%;"></video>

Answer 1

spinner 元素是一个 shadow DOM ( -internal-media-controls-loading-panel)，不能用 CSS 设置样式或被 JavaScript 删除。但是，您可以隐藏其父元素并实现自定义视频控件。您可以通过添加：

video::-webkit-media-controls { /* Works only on Chrome-based browsers */
    display: none;
}

或者简单地controls从视频元素中删除标签。

这是来自blog.teamtreehouse的一个例子，它适用于大多数流行的浏览器。加载微调器与所有默认视频控件一起隐藏。您可以随意设置控件的样式：

video::-webkit-media-controls { /* Works only on Chrome-based browsers */
    display: none;
}

const waitForLoad = (video, cb) => {
    const interval = setInterval(()=>{
        if(video.readyState >= 3){
            clearInterval(interval);
            cb();
        }
    }, 100);
}
window.onload = function () {
    const video = document.getElementById("video");
    // Wait for the video to load 
    waitForLoad(video, () => {
        // We can't call video.play directly, because it can only be initiated by a user gesture 
        alert(`The video is loaded, you can click "Play"`);
    });

    // Implement the custom controls
    const playButton = document.getElementById("play-pause");
    const muteButton = document.getElementById("mute");
    const fullScreenButton = document.getElementById("full-screen");

    const seekBar = document.getElementById("seek-bar");
    const volumeBar = document.getElementById("volume-bar");
    
    playButton.addEventListener("click", function () {
        if (video.paused == true) {
            video.play();
            playButton.innerHTML = "Pause";
        } else {
            video.pause();
            playButton.innerHTML = "Play";
        }
    });
    muteButton.addEventListener("click", function () {
        if (video.muted == false) {
            video.muted = true;
            muteButton.innerHTML = "Unmute";
        } else {
            video.muted = false;
            muteButton.innerHTML = "Mute";
        }
    });
    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
        }
    });
    seekBar.addEventListener("change", function () {
        var time = video.duration * (seekBar.value / 100);
        video.currentTime = time;
    });
    video.addEventListener("timeupdate", function () {
        var value = (100 / video.duration) * video.currentTime;
        seekBar.value = value;
    });
    seekBar.addEventListener("mousedown", function () {
        video.pause();
    });
    seekBar.addEventListener("mouseup", function () {
        video.play();
    });
    volumeBar.addEventListener("change", function () {
        video.volume = volumeBar.value;
    });
}