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 plete 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/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=".mp4" type="video/mp4">
  Your browser does not support HTML5 video.
</video>

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 plete 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./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./videos/jeff_arries_productions_intro.mp4" type="video/mp4">
  Your browser does not support HTML5 video.
</video>

Thanks for you time and effort!

• javascript
• jquery
• css
• html
• video

• 1 And did you try just $("#myVideo").fadeIn() – adeneo Commented Mar 2, 2016 at 1:38
• I replaced var e = document.getElementById("myVideo"); e.style.display = 'block' with $("#myVideo").fadeIn() and it doesn't seem to be working. – Emmet Arries Commented Mar 2, 2016 at 1:43
• Should work fine -> jsfiddle/m6ryk47L – adeneo Commented Mar 2, 2016 at 1:45
• I did exactly what you have on the fiddle. But if you go to my video page it doesn't work somehow! – Emmet Arries Commented Mar 2, 2016 at 1:47
• You have to include jQuery ` – adeneo Commented Mar 2, 2016 at 1:48

1 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