javascript - How to hide video loading spinner in HTML5 video tag? - Stack Overflow

admin管理员组

文章数量:1345728

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>

• javascript
• html

Share Improve this question Follow edited Jul 8, 2020 at 3:01 J. Scott Elblein 4,3031616 gold badges6363 silver badges105105 bronze badges asked Oct 30, 2019 at 12:18 Harsh SarohiHarsh Sarohi 81711 gold badge1010 silver badges1919 bronze badges 1

• Please check video on this link on slow 3g connection doubtnut./question-answer/… – Harsh Sarohi Commented Oct 30, 2019 at 12:32

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

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://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)

本文标签： javascriptHow to hide video loading spinner in HTML5 video tagStack Overflow