Set a Poster Frame with HTML5 Audio and Video


show more Setting a poster frame provides you with in-depth training on Video. Taught by Steve Heffernan as part of the HTML5: Video and Audio in Depth show less
please wait ...

Setting a poster frame

Another option we can use is a poster image or a poster frame, which is the image that shows in the place of the video before the video has started. Here we have 4 versions of the same video. In the first one the video tag doesn't have a poster and it's not being preloaded. So what we see here is just blank. It doesn't have any information about the video. The second one is a video tag that doesn't have a poster and it is preloading. So what we're seeing is the first frame of the video. As you can see, the first frame isn't always the best representation of the video as a whole.

It is often just a blank- frame or black-frame like here. So with the poster image, we can select specific image that we think best represents what the video is for our users and display that as a placeholder for the video. If we scroll down we can see a version of that, and we can see that it looks much nicer. We will see an actual image of the video. So this works in this case with both pr...

Setting a poster frame
Video duration: 3m 43s 2h 7m Intermediate

Viewers:

Setting a poster frame provides you with in-depth training on Video. Taught by Steve Heffernan as part of the HTML5: Video and Audio in Depth

Subjects:
Video Web
Software:
HTML
Author:
please wait ...