CODEWITHSUNDEEP
jqueryhtmlvideopauseposter
David Roshi
David Roshi

Reputation: 11

Show the poster after pausing the video in HTML

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

Upvotes: 1

Views: 2902

Answers (2)

fnune
fnune

Reputation: 5494

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.

Upvotes: 2

kernal_lora
kernal_lora

Reputation: 1155

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.

Upvotes: 0

Related Questions