The baseline for video experiences is simple: Does it play? In this video, discover that you have no control over the device or the browser being used which means you need to provide alternate source content.
As we learned earlier,…the web's reach is practically universal,…and that you have no control over which browser…and browser version,…is being used to view your video.…This is why you need to create…mp4, webm, and ogv versions of your video.…Thankfully, HTML5 let's you solve this dilemma…by giving you the opportunity to specify…alternative source files.…So, let's see how that works.…And to get yourself started,…open the file you saved from the previous exercise,…or open the AlternateSource.html file…found in the chapter download.…
Now what we're gonna do,…we're just gonna add a little space here…right above the alternative text.…Just a couple of lines, just like that,…and we're gonna come back up to line 45.…And in that space,…we can add the alternate content used by the other browsers.…Obviously, inputting a list of video elements…isn't efficient,…but HTML5 contains a "source" element…that let's you add the alternative content…to the video element.…So let's toss in the webm and ogv versions…found in the video folder.…
- 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.