Problem is on slow 3g connection it continuously shows spinner even when video is loaded and it is playing.
Code:
<video src="d3cvwyf9ksu0h5.cloudfront/answer-1530971608.mp4" preload="auto" autoplay controls controlslist="nodownload" style="width: 100%; height: 100%;"></video>
Problem is on slow 3g connection it continuously shows spinner even when video is loaded and it is playing.
Code:
<video src="d3cvwyf9ksu0h5.cloudfront/answer-1530971608.mp4" preload="auto" autoplay controls controlslist="nodownload" style="width: 100%; height: 100%;"></video>
- Please check video on this link on slow 3g connection doubtnut./question-answer/… – Harsh Sarohi Commented Oct 30, 2019 at 12:32
3 Answers
Reset to default 4The 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://mondatastorage.googleapis./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;
}
Demo
<head>
<style>
video::-webkit-media-controls {
visibility: hidden;
}
video::-webkit-media-controls-enclosure {
visibility: visible;
}
</style>
</head>
<body>
<video src="//mondatastorage.googleapis./gtv-videos-bucket/sample/BigBuckBunny.mp4" width="320" height="180" controls autoplay></video>
</body>I implemented a React app where I needed the controls when the video is playing, but for the loading phase I needed to show a custom image ("poster" in the code below) without the loading spinner. I set a state to flag when the Video is loaded, and the set the control attribute to that state:
<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)