Freeze Video on the Last Frame

[mlbass]

I’m trying to use a video on the home page (or home page editor) that paints the logo but freezes on the last frame so that logo stays on the page, or the header. I’ve set it to autoplay and removed all the controls. I put the logo in the poster image but it’s not displayed at the end. Page link below

http://winewalk.wpengine.com/

[Alaa]

Hi @mlbass

The poster image was intended to be displayed when the page is first loaded then when the user clicks on it the video will play, since you have set the video to be autoplayed, you aren’t seeing the poster image. It was not designed to be at the end when the video playing is finished.

A workaround for your case is to keep the poster image set, and show it just after the video playing is finished with JS, you can achieve that using seTimeout function since you know already the video playing time (which is 10 seconds as I can tell), I believe this can be achieved using this JS snippet in this header JS content (check this screenshot):

jQuery(window).load(function () {
  jQuery('.mejs-poster-img').remove();
  setTimeout( function ( ) {
    jQuery('.mejs-poster').css("display", "block");   
    jQuery('.mejs-inner').css("pointer-events", "none"); 
  },10000);
});

As this is all custom development, regretfully we wont be able to assist further. Custom development is outside the scope of our support. Were happy to provide advice and get you started in the right direction, but you would still be responsible for the implementation. And moreover, this solution may not work after several updates especially if the themes structure changed or overridden.

Thanks.

[mlbass]

I’ll give it a try, but is there a way to just freeze the video on the last frame and avoid trying to display the poster image?

[Alaa]

Hi @mlbass

There is a similar solution like that mentioned here but I didn’t try it, if you want to give it a try you can wrap it like that:

jQuery( document ).ready(function() {  
var player = jQuery('video');
player[0].addEventListener('ended', function(e) {
      player[0].setCurrentTime(player[0].duration);
      }, false);
});

Good luck!