Categories
JavaScript WordPress

WordPress resume Video

I needed my shared videos in WordPress to have the ability to “remember” the position where the client has paused the video, or if he has closed the browser accidentally, so when he comes back he can resume form the position where he was at in that moment.

I thought this will be something native to the HTML5 video player, but it’s not… we have many excellent features, but this one which is really simple it’s missing.

The perfect scenario would be that we store in a DB where the customer has paused the video and then no matter if he changes the browser can resume from there. That will require some simple backend and just one table, id_user, id_video, currenttime, pretty simple…

But I understand not all projects can achieve this. So this solution will remember the position only in the same browser. If they use a different one will not be remembered.

This solution works in any HTML even with multiple video players in same page , If you want to use it in WordPress install a plugin to be able to add Header and Footer Scripts. Tested in WP 5.8.

You can test it with this video:

Here you have the codepen if you want to test it. and here the source code:

I’ve been inspired by this codepen. Thanks