Menu
Problem is on slow 3g connection it continuously shows spinner even when video is loaded and it is playing.
Code:
<video src="d3cvwyf9ksu0h5.cloudfront.net/answer-1530971608.mp4" preload="auto" autoplay controls controlslist="nodownload" style="width: 100%; height: 100%;"></video>
402
The spinner element is a shadow DOM (-internal-media-controls-loading-panel) that can't be styled with CSS or removed by JavaScript. You can, however, hide its parent element and implement custom video controls. You can do it either by adding:
video::-webkit-media-controls { /* Works only on Chrome-based browsers */
display: none;
}
or simply removing the controls tag from the video element.
Here's an example from blog.teamtreehouse that works on most popular browsers. The loading spinner is hidden along with all default video controls. You can style the controls however you want:
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>On Chrome and Chrome-based browsers you can achieve this with this small trick:
video::-webkit-media-controls {
visibility: hidden;
}
video::-webkit-media-controls-enclosure {
visibility: visible;
}
<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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
