1

I'd like to chose a specific time that the tag uses (instead of the first frame - which is always black in my case) for the "preview".

I've currently made thousands of "poster" files, but this is clunky and inflexible.

Is this possible?

pixelearth
  • 13,674
  • 10
  • 62
  • 110
  • Where is the video coming from? If you've got it on YouTube, one of the prefs you can set is which image to use as a preview. – durbnpoisn Jun 10 '14 at 20:54
  • durbnpoisn: IT'S AN HTML5 VIDEO TAG! So it's in an HTML page. – pixelearth Jun 10 '14 at 21:00
  • That was NOT me. So no need to get angry. I thought it was an honest question. I'll upvote it back to normal, since someone evidently thought it was bad. – durbnpoisn Jun 10 '14 at 21:01
  • Yeah, I removed my upset part :) I get pissed off at people who downvote but don't bother to post why so their opinions can get the attention of the world at large. Tnx for the upvote :) – pixelearth Jun 10 '14 at 21:04

4 Answers4

0

What you want to do is use an image (screenshot) from the video to be set as the placeholder. The advantage of this is loading time, its much faster to load a little .PNG file instead of preloading the video to show that frame.

This appears to have been discussed before:

Previous Thread

That link may not be specific enough, you want to use the "poster" attribute in the "video" tag.

<video poster="image.png">
<source src="video.mp4" />
</video>
Community
  • 1
  • 1
  • I'm already using a poster. What I want to know is if I can choose a frame instead. Currenlty looking into the currentTime prop of video atm. No luck yet. My actual purpose is to avoid making the posters. – pixelearth Jun 10 '14 at 21:13
0

There is no immediate way to accomplish what you want.

If you do not specify a poster as per specification the browser should display the first frame of the video upon first presentation of the video tag.

When the video element is paused, the current playback position is the first frame of video, and the element's show poster flag is set The video element represents its poster frame, if any, or else the first frame of the video.

You could think about capturing a specific frame through a canvas element. This question can give you some hints on how to do that.

If you want a full-fledged thumbnail selection process, you will need to use a software like ffmpeg (server side) to generate thumbnails at different timestamps of the video and allow for a user to select one (or generate one at a given timestamp). This can help you.

Also keep in mind that a good poster can generate more views for your video (people tend to click/touch more video element with attractive posters). So spending some time on generating good posters is usually time well spent.

Community
  • 1
  • 1
Arnaud Leyder
  • 6,674
  • 5
  • 31
  • 43
0

As it turns out, I can do this with:

video.currentTime = 10

where 10 is the seconds into the video that I want to show. Only tested in Chrome....

pixelearth
  • 13,674
  • 10
  • 62
  • 110
-1

I understand, I know its a pain to create the "posters" but I think in the end its the most efficient way to achieve the effect...