mediaelement js - show poster and play icon when finished playing

I'd like the poster as well as the play icon to show up when the video has finished playing.

Did anyone try to achieve this 开发者_JAVA技巧yet?

Yes, just tried it myself for a project where the client wanted the poster image to come back when the video had completed. Here's my code:

    jQuery("video").mediaelementplayer({
        features: ["playpause","progress","current","duration","volume","fullscreen"],
        success:  function (mediaElement, domObject) { 
            mediaElement.addEventListener("ended", function(e){ 
                // Revert to the poster image when ended
                var $thisMediaElement = (mediaElement.id) ? jQuery("#"+mediaElement.id) : jQuery(mediaElement);
                $thisMediaElement.parents(".mejs-inner").find(".mejs-poster").show();
            });
        }
    });

The mediaelement player is instantiated in the usual way. I've added the 'success' function to listen for the "ended" event, which then takes our mediaElement object and traverses the DOM to find the poster image layer and switch it back on.

I just had to do this myself. This worked for me. The video is in a slideshow, so i'm also pausing slideshow if video is playing, and starting it again on end of video.

// set player buttons - pause/resume video


$('video').mediaelementplayer({

    features: ['playpause','current','progress','duration','volume'] ,

    success: function(media, node, player) {

        var events = ['play' , 'ended'];

        for (var i=0, il=events.length; i<il; i++) {


            media.addEventListener(events[0], function(e) {
                $('ul.aboutSlide').cycle('pause');
            });

            media.addEventListener(events[1], function(e) {
                $('ul.aboutSlide').cycle('resume');

                // Revert to the poster image when ended
                                $('.mejs-poster').show();
            });
        }
    }
})