How to make HTML5 video fade in when it has finished loading?

Question

I'm trying to have my HTML5 video element fade in when it loads, (I'm currently having it appear using Javascript canplaythrough as you can see in the code you see below, but it's a little harsh.) How can I get the HTML5 video element to fade in gently? I'm OK with JavaScript or jquery, but I don't know either one very well, so some complete code would be very helpful!

Here's the code: (if you run the code with the Run Code Snippet, it doesn't work well, so I highly suggest to go to my website, it's on is my video page here and works if you wait a 30 seconds/minute (until the video loads): 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>

Thanks for you time and effort!

Answer 1

Here's how to fade in the video with 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