Join Steve Heffernan for an in-depth discussion in this video Setting a poster frame, part of HTML5: Video and Audio in Depth.
- View Offline
- Exercise Files
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,…
- Understanding the differences in media formats
- Preloading, autoplaying, and looping in HTML5
- Setting a video's width and height attributes
- Displaying subtitles and captions
- Generating embed code with an embed code builder
- Encoding files using HandBrake, Firefogg, and VLC
- Creating a load progress bar
- Recognizing Android and iOS issues
Skill Level Intermediate
1. Video and Audio Basics
Understanding the format war3m 53s
2. Embedding Video and Audio
3. Falling Back to Alternative Playback Methods
4. Encoding Audio and Video Files
6. Known Issues and Workarounds
7. Audio and Video in the Wild
Further exploration1m 40s
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.Cancel
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.