Fade Html5 Video Image / Poster In And Out

Is it possible to fade out the HTML5 video poster / oimage if we start the video and fade it in again when we pause or stop the video? Normally the poster image is directly hidden

Solution 1:

The behavior of the poster attribute is really driven by the <video> tag itself. You're just telling it, before starting display this image. Like any video element customization, this would require you to have your own elements involved. Basically, you would have:

<div class="video-container" style="position:relative">
    <videowidth="x"height="y"></video><imgstyle="position: absolute; top: 0; left: 0; bottom: 0; right: 0"></div>

You would then have to bind your events, for example with Zepto:

$('.video-container img').bind('click', function() {
    var$img = $(this),
        $vid = $img.parent().find('video');
    $img.animate({opacity: 0}, 1000, 'linear', function() {
        $img.css({visibility: 'hidden'});
        $vid[0].play();
    });
});

Similarly, you would listen for the pause event and when it occurs fade back in.

That said, this is probably a bad idea for two reasons:

1. This probably won't work for iOS or any device that prevents scripted playback. In these devices, you can only trigger play() when inside a click event handler. Since you're playing a second later, you don't really have control.
2. You're breaking default functionality. When I pause a video, I may want to seek to another moment but I definitely want to know where I left off. The lack of a visual queue takes that away.

Update

Here's a different approach that would help you get around the iOS difficulties. In this case, you actually start the video on click, meaning there will be a period of time where the fading image covers the playing video, so it's your call.

$('.video-container').each(function() {
    var$img = $(this).find('img'),
        $vid = $(this).find('vid');

    $img.bind('click', function() { $vid[0].play() });

    $vid.bind('play', function() {
        $img.animate({opacity: 0}, 1000, 'linear', function() {
            if($vid[0].playing) {
                $img.css({visibility: 'hidden'});
            }
        });
    });

    $vid.bind('pause ended', function() {
        $img.css({visibility: 'visible'});
        $img.animate({opacity: 1}, 1000, 'linear');
    });

});