In this video, learn how to apply a poster frame using the poster attribute to give the user some context behind the video. Additionally, learn that the value of a poster frame is to buy the time necessary for a video to load into the browser cache.
- [Lecturer] Every now and then you may have a video…that starts with a black screen…or you just aren't happy with the…first frame of the video.…In this case, you may want to use another image…or even better use a frame from later in the video.…As you may have guessed, there is an attribute for that.…And to get yourself started, open the file that you saved…from the previous exercise or open the poster dot HTML file…found in your chapter download.…The attribute you want to use is poster.…And, you add it to the video element right here at the…end of controls by typing in the word poster.…
And it's gonna ask you where it is.…It's in the images folder 'cause it's an image…And we'll use poster dot jpg.…So what's the poster dot jpg file?…Well let's take a look.…So just gonna pop over here to my preview and there it is.…So this is a screen shot from the video…and I just added a little bit of text called…Waves on the beach at Asilomar.…And this is what will show before…the user clicks the play button.…So, let's come back and let's see if it works.…
- Key video formats used to publish on the web
- Encoding video that's optimized for online delivery
- HTML5 native video embedding and interaction
- Styling video components with CSS
- Captioning video
- Preparing video for social media
- Using Dynamic Link
Skill Level Beginner
Design the Web: HTML Background Videowith Chris Converse28m 35s Beginner
Web Video: Develop Your Video Presencewith Rick Allen Lippert41m 54s Appropriate for all
Web Video: Makeup Techniqueswith Rick Allen Lippert25m 47s Appropriate for all
Exercise files1m 11s
1. Web Video Formats
2. Encoding Video
3. HTML5 and Video
4. Video and CSS
5. Playing with Video
Next steps1m 23s
- 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.