{"id":52,"date":"2008-08-14T16:10:13","date_gmt":"2008-08-14T20:10:13","guid":{"rendered":"http:\/\/webvideouniversity.com\/blog\/?p=52"},"modified":"2008-08-14T16:10:13","modified_gmt":"2008-08-14T20:10:13","slug":"understanding-high-definition-video-on-the-web-h264","status":"publish","type":"post","link":"https:\/\/webvideouniversity.com\/blog\/2008\/08\/14\/understanding-high-definition-video-on-the-web-h264\/","title":{"rendered":"Understanding High-Definition Video On The Web &#8211; H.264"},"content":{"rendered":"<p>When most people are starting out, trying to get their first video online, they are happy to simply get something out there.  Quality concerns are usually buried somewhere down towards the bottom of the list.<\/p>\n<p>But usually, after they&#8217;ve broken through that initial learning curve, they&#8217;ll want to know how to get their videos looking as gorgeous, as say, the videos they see on Apple&#8217;s site.<\/p>\n<p>And that&#8217;s when they stumble upon&#8230;and get totally confused by&#8230;something called <strong>h.264<\/strong>.<\/p>\n<p><strong>H.264 (or MPEG-4)<\/strong> is the high-definition video format on the web.  It was originally spearheaded by Apple, in large part, as a way to get high-quality video&#8230;at small file sizes&#8230;onto devices such as the iPod.  In fact, these days, any video you create in the QuickTime format (Apple&#8217;s video format), will be done using h.264.<\/p>\n<p>But it wasn&#8217;t until <strong>Flash<\/strong> (the dominant video format on the web) began supporting h.264 with Flash Player 9, that &#8220;high-definition&#8221; web video began catching people&#8217;s eyes.<\/p>\n<p>In a nutshell, the h.264 format gives you outstanding quality at really small file sizes.  Let&#8217;s start with a 45 second video in an uncompressed AVI file format (170 MB large) as an example.  When we encode that file into a Flash video, using the high-quality VP6 format, we get a great looking video that is <strong>7 MB<\/strong> in size.<\/p>\n<p>However, when we encode that same file into a Flash video using h.264, we get a noticeably better looking video that is <strong>2 MB<\/strong> in size.  And again, that&#8217;s the allure of h.264&#8230;better quality, smaller size.<\/p>\n<p><strong>But it&#8217;s not all roses<\/strong>.  If you want to use h.264 for your videos, there are some things you need to know first.<\/p>\n<p>Now as I previously mentioned, virtually any tool you use these days to create QuickTime movies, will by default, use the h.264 codec.  Problem is, only about half of the people on the web will be able to watch your QuickTime movie without first being prompted to download the QuickTime plugin (and many will be too intimidated to do so, opting to click away instead).<\/p>\n<p>The more popular route to go is Flash.  But that presents it&#8217;s own problems.  First, the viewer must have Flash Player 9 or above installed on their computer to view h.264 videos (and if they don&#8217;t have it, they&#8217;ll have to download it&#8230;just like with the QuickTime plugin).<\/p>\n<p>After that, the player you use for your Flash video files must support h.264 as well.  A free player, like the <a href=\"http:\/\/www.jeroenwijering.com\/?item=JW_FLV_Media_Player\" target=\"_blank\">JW Player here<\/a>, does support h.264.  But many do not.  And it leads to a lot of frustration with web site owners wondering why they can&#8217;t get their shiny-new h.264 videos to play.<\/p>\n<p>Beyond those headaches (which by the way are easily bypassed once understood), the h.264 format does offer a &#8220;secret&#8221; that&#8217;s really cool.<\/p>\n<p><strong>What&#8217;s the secret?<\/strong> Well, Flash Player 9 automatically knows if a video is h.264&#8230;even if it was created in a format other than Flash.  That means you can create a QuickTime movie, rename the file extension from .mov to .flv and the video will play fine as a Flash file.  This is especially useful to know since many of the best options for creating h.264 files will only create videos in the QuickTime format (files with a .mov or .mp4 extension).<\/p>\n<p>Want to see just how good h.264 videos can look?  Well, check out these breathtaking examples from Apple&#8217;s site:<\/p>\n<p><a href=\"http:\/\/www.apple.com\/quicktime\/guide\/hd\/\" target=\"_blank\">HD Video Gallery<\/a><\/p>\n<p><a href=\"http:\/\/www.apple.com\/trailers\/\" target=\"_blank\">Movie Trailers<\/a><\/p>\n<p><strong>P.S.<\/strong> You don&#8217;t have to shoot high-definition video to take advantage of the h.264 format on the web.  It works just fine with standard definition video too.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>When most people are starting out, trying to get their first video online, they are happy to simply get something out there. Quality concerns are usually buried somewhere down towards the bottom of the list. But usually, after they&#8217;ve broken through that initial learning curve, they&#8217;ll want to know how to get their videos looking [&hellip;]<\/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":[8],"tags":[38,40,34],"_links":{"self":[{"href":"https:\/\/webvideouniversity.com\/blog\/wp-json\/wp\/v2\/posts\/52"}],"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=52"}],"version-history":[{"count":0,"href":"https:\/\/webvideouniversity.com\/blog\/wp-json\/wp\/v2\/posts\/52\/revisions"}],"wp:attachment":[{"href":"https:\/\/webvideouniversity.com\/blog\/wp-json\/wp\/v2\/media?parent=52"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webvideouniversity.com\/blog\/wp-json\/wp\/v2\/categories?post=52"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webvideouniversity.com\/blog\/wp-json\/wp\/v2\/tags?post=52"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}