Join Tom Green for an in-depth discussion in this video Supporting multiple video formats, part of Up and Running with HTML5 Video.
In the previous video, you discovered a rather nasty HTML5 gotcha.…Not all the browsers will play your file. In this exercise, we'll turn this gotcha…into a non-issue. The root of the problem lies in the fact…that video playback has been left to the browsers.…And the current state of this decision is competing video format.…Safari, chrome, and IE will play an MP4, while Chrome, Opera and Firefox will play…WebM are ogg files or ogg. Let's get to work solving this issue…providing the browsers with multiple video sources.…
To do so, open the index.html file located in your chapter 03 video 02 folder.…As you can see, there is already a source tag for the mp4 version.…Our task is to also add the WebM and ogv source files to the lineup.…We also need to add the respected file attributes, so, the browser knows what…type of video it is, and can skip over the ones it can't play.…Rather than give you a great big typing lesson, I'm going to give you a little…teacher trick. Select the source attribute here and copy…
- 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
HTML5: Video and Audio in Depthwith Steve Heffernan2h 7m Intermediate
Create an HTML5 Video Gallery with jQuerywith Chris Converse59m 53s Intermediate
Editing Video in Photoshop CS6with 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?
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.