javascript - fade HTML5 video imageposter in and out - Stack Overflow

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 when the video is started and also directly shown when we load the video / stop it

Maybe we can clone the poster image to a canvas, position it over the video and fade it out and in?

Is there an existing solution / script?

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 when the video is started and also directly shown when we load the video / stop it

Maybe we can clone the poster image to a canvas, position it over the video and fade it out and in?

Is there an existing solution / script?

• javascript
• video
• html5-video
• fadein
• fadeout

Share Improve this question Follow edited May 1, 2014 at 11:49 asked Jun 15, 2012 at 21:49 user753676user753676 2

• Could you simply alter the opacity of the div containing the poster? – Jeff Watkins Commented Jun 15, 2012 at 21:51
• the poster is part of the html5 video normally, currently it has not its own iv or something else as it is a normal parameter of html5 video (poster="imageurl") – user753676 Commented Jun 15, 2012 at 21:58

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

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">
    <video width="x" height="y"></video>
    <img style="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');
    });

});