How to make HTML5 video disappear when it finishes loading?

Question

I'm trying to make my HTML5 element disappear when it loads (I currently see it with Javascript canplaythrough , as you can see in the code you see below, but it's a little tough.) How can I make an HTML5 video element disappear soft? I'm fine with javascript or jquery, but I don't know a single one very well, so some complete code will be very useful!

Here is the code: (if you run the code using the code of the execution script, this will not work, so I highly recommend going to my site, this is my video page here and it works if you wait 30 seconds / min (before loading the video): jeffarries .com / videos .

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

 <video style="display: block;" id="myVideo" width="320" height="176" controls> <source src="http://www.jeffarries.com/videos/jeff_arries_productions_intro.mp4" type="video/mp4"> Your browser does not support HTML5 video. </video> 

Thank you for your time and effort!

Answer 1

Here's how to fade out a video using javascript

 var e = document.getElementById("myVideo"); e.style.opacity = 0; var vid = document.getElementById("myVideo"); vid.oncanplaythrough = function() { setTimeout(function() { var e = document.getElementById('myVideo'); fade(e); }, 5000); }; function fade(element) { var op = 0; var timer = setInterval(function() { if (op >= 1) clearInterval(timer); element.style.opacity = op; element.style.filter = 'alpha(opacity=' + op * 100 + ")"; op += op * 0.1 || 0.1; }, 50); } 

Fiddle