{"id":2530,"date":"2011-11-28T18:10:30","date_gmt":"2011-11-28T22:10:30","guid":{"rendered":"http:\/\/webvideouniversity.com\/blog\/?p=2530"},"modified":"2015-10-28T15:41:17","modified_gmt":"2015-10-28T19:41:17","slug":"html5-video-101","status":"publish","type":"post","link":"https:\/\/webvideouniversity.com\/blog\/2011\/11\/28\/html5-video-101\/","title":{"rendered":"HTML5 Video 101"},"content":{"rendered":"

Last week I did a video review of the new Kindle Fire<\/strong><\/a>. \u00a0 As part of my review, I suggested that people deliver their videos to the Kindle Fire using HTML5 instead of Flash.<\/p>\n

Why?<\/strong> Because HTML5 video playback on the Kindle Fire, in my testing, was much smoother than Flash.\u00a0 That led to a number of people wanting to know more about HTML5 video.\u00a0 So here’s a primer on it.<\/p>\n

HTML is a programming language.\u00a0 It is used to create web pages.\u00a0 HTML5 is the latest version of the HTML programming language.\u00a0 One of the biggest additions to HTML5 is support for the video tag<\/em><\/strong>.\u00a0 With it, people can add videos to a web page as easily as they add images.<\/p>\n

The idea behind the video tag was standards<\/strong><\/em>.\u00a0 That means the intention was a single video format for the web that made it simple for everyone to add videos to a web page and simple for everyone to watch videos on a web page.\u00a0 There are no browser plugins required (like Flash or Quicktime) and no confusing\/cryptic video embed code is needed (like Flash or Quicktime) when using HTML5 video.<\/p>\n

While the idea behind HTML5 video is great, unfortunately the powers-to-be (Google, Mozilla, Microsoft, Apple, etc.) have made it a bit of a mess<\/strong>.\u00a0 That’s because none of them can agree on what the single video format should be for HTML5.\u00a0 In a nutshell, Google and Mozilla think it should be WebM <\/strong>or Ogg <\/strong>and Apple and Microsoft think it should be H.264 (mp4)<\/strong>.<\/p>\n

That means to make your video play using HTML5…across all browsers…you must prepare your video in at least 3 different formats.\u00a0 WebM and Ogg for Google Chrome and Mozilla Firefox browsers and H.264 for basically all other browsers (including basically all mobile device browsers).<\/p>\n

So how do you get your videos into each of these formats?<\/strong> If you want to go the free route, you can use Miro Video Converter<\/a>.\u00a0 If you have money to burn, you can use Sorenson Squeeze<\/a>.\u00a0 And if you prefer to go the cloud encoding route, both Zencoder<\/a> and Encoding.com<\/a> are good choices.<\/p>\n

OK…after you have your videos in the 3 different formats (WebM, Ogg and H.264)…how do you embed HTML5 video in your web pages? <\/strong> This is actually the simplest part.\u00a0 The code goes like this:<\/p>\n

\n
<video width=\"320\" height=\"240\" controls=\"controls\">\r\n  <source src=\"full url to your h.264\/mp4 video\" type='video\/mp4' \/>\r\n  <source src=\"full url to your ogg video\" type='video\/ogg' \/>\r\n  <source src=\"full url to your webm video\" type='video\/webm' \/>\r\n<video><\/pre>\n<\/blockquote>\n
Pretty simple huh?<\/strong> You’d just take the above code and paste it in your web page (keeping in mind you need to change the “full url” listings to the actual full URL’s to your videos).\u00a0 And you’d probably want to change the video width and height values.<\/p>\n
Actually, there are more things you can do with HTML5 embed code, but we’re just keeping things simple here.\u00a0 If you want to see the full array of commands you can use, click here<\/a>.<\/p>\n
Anyway, there are a couple big gotcha’s with HTML5 video<\/strong>.\u00a0 First, you must create<\/strong><\/em> a video in each of the 3 formats…remember, different browsers require different versions of the same video.<\/p>\n
For example, if you don’t make an H.264\/MP4 version of your video, people using Apple mobile devices, Internet Explorer 9, Safari and a number of other browsers won’t be able to see your video.\u00a0 Or if you don’t make an Ogg version of your video, people using Firefox won’t be able to watch your video.<\/p>\n
Second, Internet Explorer versions 8 and older do not support HTML5 whatsoever<\/strong>.\u00a0 Only Internet Explorer version 9 supports HTML5.\u00a0 That means when someone using Internet Explorer 8, 7, 6, etc. tries to watch your HTML5 videos, they won’t see anything.<\/p>\n
So what do you do about this issue (after all, a lot of people still use Internet Explorer 8)? <\/strong> You provide Flash fallback<\/strong><\/em>.\u00a0 That means you tweak your HTML5 video embed code in such a way that if a viewer is using a browser that doesn’t support HTML5, the embed code will sense it and deliver the video using old-fashioned Flash.<\/p>\n
Of course the next question is, how exactly do you do that?<\/strong> Well, there are lots of options.\u00a0 One of the simplest (because they offer an embed code generator) is VideoJS<\/strong><\/a>.\u00a0 With VideoJS, all you have to do is supply the URL’s to your files and click a button…they’ll give you HTML5 embed code, with Flash fallback…that you can simply copy and paste into your web pages.<\/p>\n
And that’s all there really is to it.\u00a0 Prepare your videos in the 3 formats (H.264\/MP4, Ogg, WebM) and use a free service like VideoJS to build HTML5 embed code with Flash fallback for you.<\/p>\n
But if you’re still confused about HTML5 and mobile video in general, check out our Mobile Video Made Simple course<\/strong><\/a>.\u00a0 With it, you can master mobile\/HTML5 video in about an hour…even if you’re a complete beginner.\u00a0 It takes out all of the guesswork and makes mobile\/HTML5 video as easy as connecting some dots.<\/p>\n","protected":false},"excerpt":{"rendered":"
Last week I did a video review of the new Kindle Fire. \u00a0 As part of my review, I suggested that people deliver their videos to the Kindle Fire using HTML5 instead of Flash. Why? Because HTML5 video playback on the Kindle Fire, in my testing, was much smoother than Flash.\u00a0 That led to a […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0},"categories":[19],"tags":[879,881,880],"_links":{"self":[{"href":"https:\/\/webvideouniversity.com\/blog\/wp-json\/wp\/v2\/posts\/2530"}],"collection":[{"href":"https:\/\/webvideouniversity.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webvideouniversity.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webvideouniversity.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/webvideouniversity.com\/blog\/wp-json\/wp\/v2\/comments?post=2530"}],"version-history":[{"count":22,"href":"https:\/\/webvideouniversity.com\/blog\/wp-json\/wp\/v2\/posts\/2530\/revisions"}],"predecessor-version":[{"id":2676,"href":"https:\/\/webvideouniversity.com\/blog\/wp-json\/wp\/v2\/posts\/2530\/revisions\/2676"}],"wp:attachment":[{"href":"https:\/\/webvideouniversity.com\/blog\/wp-json\/wp\/v2\/media?parent=2530"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webvideouniversity.com\/blog\/wp-json\/wp\/v2\/categories?post=2530"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webvideouniversity.com\/blog\/wp-json\/wp\/v2\/tags?post=2530"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}