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 preloading and not preloading, as you can see in the versions 3 and 4. To set a poster-image, first we need to select our image. The image can be either a GIF, JPEG or PNG, just like a normal HTML image.
As for the image content, it should be something that gives the user an idea of what the video is. It often means selecting a specific frame of the video or even designing a title image. For this one I just grabbed a frame from later on in the video. If we scroll ahead, in this vide -- (Music playing) You can see I just grabbed it from right around here. I used QuickTime Pro on the Mac to pull out the frame, but if you have any kind of video editing software you should be able to pull a frame from the video easily enough. All right, so let's go to the code and add a poster frame.
So now we are in the 2-06 folder, if you're following along in exercise files, and if you have been following along in the same file, it actually reverted to a version of our video tag that now we're back to the podcast video file and we don't have the autoplay attribute in here and we don't have the loop attribute. So if you have either of those still, you can remove those. Now, to add a poster image, we just add the poster attribute and then set that to our image source, which in this case is here at our video assets folder and podcast dash-poster.jpg All right, so if we save that and go over to Firefox and go to our podcast page, reload it, you see now we have our poster image for our podcast and it looks much nicer than the black frame that we had there before.
For the most part, browsers support the poster attribute pretty consistently. There is an issue with Safari where if you preload the video, Safari will show the first frame of the video as soon as it's available. Actually, I'm going to go pull up that same demo page in Safari and if we scroll down to the last 2 versions, you can see in the first one we have a poster and it's not preloading and in the last one we have a version that has a poster and it's preloading and what we're seeing is the first frame of the video. So other browsers will continue to show the poster image until the user clicks play and I think that's what we'd all expect to happen.
So hopefully Safari will change it soon so we'll still see the poster in this case. If you're preloading the video and you want to get around this issue, you could splice the poster image into the first frame of the video and then when Safari shows the first frame, it'll be the poster image. That gets a little bit more complicated though, especially if you're not the one making the video. But otherwise the poster will show first in most cases. Now that you know how to do a poster, I would recommend using it whenever possible, because it looks much nicer and it can really help your users understand what the video is before playing it.
Get unlimited access to all courses for just $25/month.Become a member
110 Video lessons · 50492 Viewers
86 Video lessons · 13596 Viewers
79 Video lessons · 14873 Viewers
350 Video lessons · 101126 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Your file was successfully uploaded.