I'm trying to animate the poster attribute of the HTML5 video element. Anyone have any idea how I can target the poster attr using jQuery? What I want to to is have the poster img fade out as the video starts playing to avoid the jumpiness that is currently present. Here's the code...

HTML:

<video id="vid preload="auto" loop="loop" poster="images/firstFrame.png">
  <source src="video/bg.mp4" type="video/mp4" />
  <source src="video/bg.webm" type="video/webm" />
</video>

JS:

$(document).ready(function() {
  var vid = document.getElementById("vid");

  vid.oncanplaythrough = function() { 
    $('POSTER???').animate({'opacity': '0'});
    vid.oncanplay = vid.play();
  }
});

I've searched Google and SO without finding a solution for this problem. (I found this: fade HTML5 video image / poster in and out but it does not solve the problem)

Thanks for your input.

I'm trying to animate the poster attribute of the HTML5 video element. Anyone have any idea how I can target the poster attr using jQuery? What I want to to is have the poster img fade out as the video starts playing to avoid the jumpiness that is currently present. Here's the code...

HTML:

<video id="vid preload="auto" loop="loop" poster="images/firstFrame.png">
  <source src="video/bg.mp4" type="video/mp4" />
  <source src="video/bg.webm" type="video/webm" />
</video>

JS:

$(document).ready(function() {
  var vid = document.getElementById("vid");

  vid.oncanplaythrough = function() { 
    $('POSTER???').animate({'opacity': '0'});
    vid.oncanplay = vid.play();
  }
});

I've searched Google and SO without finding a solution for this problem. (I found this: fade HTML5 video image / poster in and out but it does not solve the problem)

Thanks for your input.

• javascript
• jquery
• html5-video

2 Answers 2

Here is how I faded out the poster, or more precisely faded IN the video.

HTML:

<div id="container">
  <video id='video' controls="controls" muted="muted" autoplay="true" preload='none'>
    <source id='mp4' src="http://media.w3/2010/05/sintel/trailer.mp4" type='video/mp4'/>
    <source id='webm' src="http://media.w3/2010/05/sintel/trailer.webm" type='video/webm'/>
    <source id='ogv' src="http://media.w3/2010/05/sintel/trailer.ogv" type='video/ogg'/>
    <p>Your user agent does not support the HTML5 Video element.</p>
  </video>
</div>

CSS:

/* replaces the "cover" image in html5 video */
#container {
  width: 100vw;
  height: auto;
  background-image: url("https://i.ytimg./vi/aqz-KE-bpKQ/maxresdefault.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: black;
}

#video {
  width: 100%;
  height: auto;
  opacity: 0;                /* start faded out */ 
  transition: opacity 2s;    /* css fade in */
}

jQuery:

/* wait for all elements of DOM to be rendered */
$(document).ready(function() {

    /* force some of these attr */
    $("#video").attr({"autoplay": true,
                            "muted": true});

    /* double ensure that video is muted otherwise chrome
          won't autostart */
    $("#video").prop('muted', true);

    /* when video auto plays, it fades in */
    $("#video").bind('play', function (e) {
      $("#video").css('opacity', 1.0);
    });
});

Codepen

In action on my site

This works beautifully on chrome, but mileage may vary on other browsers.

Use attribute selector in jquery.but we can't fadeout the poster beacuse it is part of video if you fadeout means full video be hide. So we are able to just remove the poster from the video.

    vid.oncanplaythrough = function() { 
        var $this = $(this);
        $this.attr('poster' , '').fadeOut('fast');
        $this.fadeIn('fast');
      vid.oncanplay = vid.play();
  }

Fiddle