1

The title pretty much says it all. I'm trying to have some text that says "Video Loading" and a 75% opaque background over the HTML5 video, and once it has completely loaded I want the text and background to disappear. How can I do that?

Thanks for you time and effort! The page I'm trying to do this on is jeffarries.com/videos. Can provide code if needed.

The dup link is to a post trying to get the duration of the HTML5 video, I'm trying to have JavaScript change css properties when the HTML5 video is completely FINISHED loading into the browser.

Emmet Arries
  • 539
  • 2
  • 12
  • 35
  • Surely there are lots and lots of examples showing how to display a loading progress indicator for HTML5 videos. What have you tried and what are you getting hung up on? – jeffjenx Feb 29 '16 at 21:08
  • Duplicate of http://stackoverflow.com/questions/13864795/wait-until-an-html5-video-loads – Sébastien Vercammen Feb 29 '16 at 21:09
  • @Quantastical I'm new to JavaScript and don't know the markup well, and was hoping for a finished/near finished solution. – Emmet Arries Mar 01 '16 at 01:30
  • @Jeff check out the HTML5 video 'onloadeddata' or "canplaythru' events and that will be when you'd want to hide your overlay - https://www.w3.org/2010/05/video/mediaevents.html – Offbeatmammal Mar 01 '16 at 02:54
  • @Offbeatmammal Great Link, thanks a lot!!! It looks like "canplaythrough" would be better, could you please give me some JavaScript code that would change the CSS `display: block;` to `display: none;` for HTML element with id "video_loading"?? I don't know JavaScript well, thanks! – Emmet Arries Mar 01 '16 at 04:02
  • have a look at this answer to get you started ... change the event, and rather than reset the source change the CSS for the video_loading element - http://stackoverflow.com/questions/27284751/how-to-stop-playing-a-video-element-and-return-it-back-to-its-original-state/27286015#27286015 – Offbeatmammal Mar 01 '16 at 05:32
  • @Offbeatmammal That's great! However, how do I get it to respond to "canplaythrough"?? – Emmet Arries Mar 01 '16 at 18:21

1 Answers1

1

I ended up using this JavaScript code to hide my HTML element with id "video_cover" by changing CSS display: block; to display: none; when the HTML5 video element "myVideo" fires canplaythrough:

<script>
var vid = document.getElementById("myVideo");
vid.oncanplaythrough = function() {
    var e = document.getElementById("video_cover");
       e.style.display = 'none'
};
</script>

Resources: W3Schools canplaythrough JavaScript event.

Sorry if my JavaScript terminology is bad, I'm just learning it!

Thanks again @Quantastical and @Offbeatmammal for all your help!

Emmet Arries
  • 539
  • 2
  • 12
  • 35