0

I am using HTML5 video, Is there any possible way to use the video frame as the video poster ?

<video controls poster="/images/poster.jpg">
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
</video>

EDIT : To make the question more simple. How can I use the last frame of the video as the poster image for video ?

Shahil M
  • 3,836
  • 4
  • 25
  • 44
  • Can you provide a [Minimal, Complete, and Verifiable example](http://stackoverflow.com/help/mcve). – SAMUEL Mar 06 '17 at 05:47
  • Possible duplicate of [Dynamically using the first frame as poster in HTML5 video?](http://stackoverflow.com/questions/7323053/dynamically-using-the-first-frame-as-poster-in-html5-video) – Malcolm Vaz Mar 06 '17 at 05:50

3 Answers3

0

There is no any method available to extract frame your video and use as a Poster of your video. It is only done by manually.

This is a good method you can take the screenshot of your desired frame. and apply screenshot as the poster. It is the good method.

Zohaib
  • 168
  • 2
  • 13
0

Best solution is to get last frame image by some simple print screening, or getting another image that you can find.

Once video is over, just reduce it's opacity until it's hidden and leave background image (or if its poster, ignore this step), and background image will stay there.

There is no way (at least I don't know one) to keep last frame visible (because, unlike animation, you can't say 'forward' on video).

You can either loop it, or hide it once its over (or display poster, but you have to cut/get that image yourself).

b.doe
  • 134
  • 6
0

try this 

var oVideo = document.getElementsByTagName("video")[0];
oVideo.currentTime = oVideo.duration;
function remove() {
  oVideo.currentTime = 0;
  console.log("clicked");
  oVideo.removeEventListener("play", remove, false);
};
oVideo.addEventListener("play", remove, false);

not really sure if this is what you want..

X-sky
  • 47
  • 5
  • by the way, use innitial html5 controls may be imperfect with the process bar slide to the end. Try build a unique bar. – X-sky Jun 21 '18 at 09:32