Giving the user the ability to control video playback makes for good experiences. In this video learn how to use the controls attribute and learn that each browser has its own version of video controls.
- [Narrator] Having discovered auto play is evil,…let's turn our attention to providing the user…with a meaningful experience,…by putting him or her in control of the process.…The use of the word "Control" is deliberate,…because that is the word that makes video play in a webpage.…So to get yourselves started open the file that you saved in…the previous exercise or open the controls.html file…found in your chapter download.…And we're going to come back down to line 44…and, we're going to get rid of muted autoplay.…
So we'll just select it and delete it.…And in it's place,…we're going to type in the attribute ..."controls".…And there you go.…That's the attribute, that would add controls to the video.…So let's save and take a look at what we've got.…So I'm going to popover to Chrome,…and you can see there are the controls.…The neat aspect of adding controls,…is the video will not play until the user actually clicks…the play button right here.…(seaside breeze)…You can see that you can scrub, you got time code,…you can turn off the audio and my favorite feature of course…
- 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 Intermediate
Web Video: Develop Your Video Presencewith Rick Allen Lippert41m 54s Intermediate
Web Video: Makeup Techniqueswith Rick Allen Lippert25m 47s Intermediate
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.