HTML5 Video readyState with Event Listener

Question

Trying to display a 'loading' div until my MP4 is done buffering. Seems like it should do the trick, but no go- loading stays up even when done buffering! Any suggestions?

<video id="homeVideo" style="width: 100%; overflow: hidden;" autoplay>
<source src="/media/micro_home.mp4" type="video/mp4">
</video>

<style>#slider_loading {display: visible;}
<div id="slider_loading" class="slider_loading"></div>

<script type="text/javascript">
var video = document.getElementById("homeVideo");

if (video.readyState === 4) {
    document.getElementById('homeVideo')style.display = "none";
}
</script>

score 0 · Answer 1 · answered Apr 19 '16 at 16:34

You can use the poster attribute to work this out, see the example:

<video controls poster="/images/w3html5.gif">
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>

"The poster attribute specifies an image to be shown while the video is downloading, or until the user hits the play button. If this is not included, the first frame of the video will be used instead."

See more at the poster attribute docs.

HTML5 Video readyState with Event Listener

1 Answers1