0

So the HTML5 video has no controls. Basically I want to show a loading gif that shows over the video only when the video is loading (buffering and paused)

<video id="myvideo" width="100%"><source src="video/Good.mp4" type="video/mp4"><source src="movie.html" type="video/ogg"></video>
Neestz
  • 3
  • 4
  • 2
    Check out this thread [https://stackoverflow.com/questions/26759981/detect-when-video-is-buffering-if-so-display-gif](https://stackoverflow.com/questions/26759981/detect-when-video-is-buffering-if-so-display-gif) – sagar1025 Feb 10 '19 at 02:16
  • Possible duplicate of [Detect when video is buffering, if so display gif](https://stackoverflow.com/questions/26759981/detect-when-video-is-buffering-if-so-display-gif) – Kosh Feb 10 '19 at 05:30

1 Answers1

0

How about using the built-in browser animation instead of a gif. All you have to do is set the controls to TRUE and then back to FALSE depending on the buffering state. The best practice for me looks like this,

<video src="myVideo.fileExtension" onplaying="hideControls(this)" onwaiting="showControls(this)" preload="auto" poster="myAnimatedWebpOrGifThatSaysVideoIsNotYetReady.fileExtension">No video support?</video>

<script type="text/javascript">
//We hide the video control buttons and the playhead when the video is playing and enjoyed by the viewer
function hideControls(event){ event.controls=false; }
//If the video has to pause and wait for data from the server we let controls be seen if the user hovers or taps on the video. As a bonus this also makes the built-in loading animation of the browser appear e.g. the rotating circular shape and we give it a little delay (like 1 sec) because I would say it looks and feels better.
function showControls(event){ setTimeout(function(){ event.controls=true; },1000); }
</script>

Maybe you could use ontimeupdate instead of onplaying which would fire continuously. As for the delay time actually not 1 but 4 seconds -to me- is the best.

HolyResistance
  • 594
  • 1
  • 8
  • 26