Join Tom Green for an in-depth discussion in this video Working with poster frames, part of Learning HTML5 Video.
There are going to be occasions where the video is not set to auto-play, and the…first frame of the video is nothing more than a black box, and that is all the user sees.…A black box. This is a common scenario, and might be a…bit confusing for your users. This is a great use case for the addition…of a poster frame to the project, and that's what we're going to do in this excercise.…To get yourself started, open the index.html file, which can be found in…your chapter three exercise folder. The index.html file is in the 05 poster…frame folder, and inside that is another folder named start.…
When the file opens click once at the end of the pre-load attribute and enter the…following, poster equals Images, which is the folder where the poster frame is…located, or the poster image. And it's called Poster.jpg.…Close the quote, save the file and let's test it in the browser.…And you can see, there's the poster frame. Okay, we're going to return back to the…code and set a pre-load attribute for metadata to Auto.…
- Understanding web video delivery challenges
- Understanding video containers or codecs
- Exploring bitrate
- Creating MP4 and WebM videos
- Using the video tag
- Preloading video
- Working with multiple formats
- Setting up autoplay
Skill Level Beginner
Creating Video Bumpers with HTML5with Joseph Lowery31m 36s Intermediate
Creating an HTML5 Video Gallery with jQuerywith Chris Converse59m 53s Intermediate
Photoshop CS6: Editing Videowith Richard Harrington1h 55m Appropriate for all
1. How We Got into This Mess
2. HTML5 Video Primer
3. Showtime: Playing a Video Stream
4. There Are Alternatives
Next steps1m 35s
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
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.