问题是在速度较慢的3g连接上，即使在加载视频并播放时，它也会持续显示微调器。
代码：
<video src="d3cvwyf9ksu0h5.cloudfront.net/answer-1530971608.mp4" preload="auto" autoplay controls controlslist="nodownload" style="width: 100%; height: 100%;"></video>
微调器元素是一个阴影DOM(-internal-media-controls-loading-panel(，不能用CSS设置样式或用JavaScript删除。但是，您可以隐藏其父元素并实现自定义视频控件。您可以添加以下内容之一：
video::-webkit-media-controls { /* Works only on Chrome-based browsers */
display: none;
}
或者简单地从视频元素中移除CCD_ 2标签。
下面是blog.teamtreehouse的一个例子，它适用于大多数流行的浏览器。加载微调器与所有默认视频控件一起隐藏。您可以随心所欲地设置控件样式：
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;
});
}<body>
<div id="video-controls">
<button type="button" id="play-pause">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>
<video src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4" id="video" width=320 height=192></video>
</body>在Chrome和基于Chrome的浏览器上，您可以通过以下小技巧实现这一点：
video::-webkit-media-controls {
visibility: hidden;
}
video::-webkit-media-controls-enclosure {
visibility: visible;
}
Demo
<head>
<style>
video::-webkit-media-controls {
visibility: hidden;
}
video::-webkit-media-controls-enclosure {
visibility: visible;
}
</style>
</head>
<body>
<video src="//commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" width="320" height="180" controls autoplay></video>
</body>我实现了一个React应用程序，其中当视频播放时，我需要控制，但在加载阶段，我需要显示一个没有加载微调器的自定义图像(下面代码中的"海报"(。当加载视频时，我将状态设置为标志，并将控制属性设置为该状态：
<video
autoPlay
id="video"
width="100%;"
className='video-style'
controls={videoLoaded}
poster={poster}
onCanPlayThrough={handleLoaded}
onPlay={handlePlay}
>
const handleLoaded = () => {
setVideoLoaded(true)
}
const handlePlay = () => {
setVideoLoaded(true)
const [videoLoaded, setVideoLoaded] = useState(false)