Show the poster after pausing the video in HTML

Question

I have this code

<video id="primorvid" onclick="this.paused ? this.play() : this.pause();" poster="http://primor.m-sites.co.il/wp-content/uploads/2016/08/Untitled-18.jpg" width="1903" height="564">
<source src="http://primor.m-sites.co.il/wp-content/uploads/2016/08/Primor-V.4-HD.mp4" type="video/mp4" />
</video>

the video works, it shows a poster image before i click the video, and the play/pause is working fine-

how do i proceed from here if i want the poster to reappear again after i pause the video?

Thank you very much David

Answer 1

Add this JS code:

const vid = document.querySelector('#primorvid');
let currentTime = 0;

vid.addEventListener('click', function(e) {
    if (vid.paused) {
        currentTime = vid.currentTime;
        vid.load();
    } else {
        vid.currentTime = currentTime;
    }
});

Explanation:

const vid = document.querySelector('#primorvid');
let currentTime = 0;

Just getting the video and storing it in vid, and declaring a currentTime where we will store the time at which the video was paused.

We add a click event listener to the video:

vid.addEventListener('click', function(e) { ... });

If the video's last state was playing (i.e. it is now paused), save the current time and reload it (this shows the poster and pauses the video):

if (vid.paused) {
    currentTime = vid.currentTime;
    vid.load();
} else {
    vid.currentTime = currentTime;
}

Else, set the current time to what it was before and play again.

Another solution which wouldn't imply buffering the video again would be to set an overlaying element with your poster and show it when the video is paused, alongside an event listener.

Answer 2

You can try this.

var vrVid = document.getElementById("primorvid");
var pauseTime = vrVid.currentTime;
vrVid.load();
vrVid.currentTime = pauseTime;
vrVid.play();

I think it will solve your issue but i don't think it's best solution because it will reload the video and it will buffer.