CODEWITHSUNDEEP
javascripthtml
Harsh Sarohi
Harsh Sarohi

Reputation: 817

How to hide video loading spinner in HTML5 video tag?

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>

Upvotes: 6

Views: 9655

Answers (3)

tal
tal

Reputation: 1

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)

Upvotes: 0

user9372816
user9372816

Reputation: 103

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="//commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" width="320" height="180" controls autoplay></video>
</body>

Upvotes: 3

Tomasz Kasperczyk
Tomasz Kasperczyk

Reputation: 2093

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>

Upvotes: 4

Related Questions