{"id":546,"date":"2009-02-01T19:52:08","date_gmt":"2009-02-02T03:52:08","guid":{"rendered":"http:\/\/multimedia.cx\/eggs\/?p=546"},"modified":"2011-01-18T20:44:59","modified_gmt":"2011-01-19T04:44:59","slug":"html5-video-tag","status":"publish","type":"post","link":"https:\/\/multimedia.cx\/eggs\/html5-video-tag\/","title":{"rendered":"Researching The HTML 5 Video Tag"},"content":{"rendered":"<p>Discussions of the <a href=\"http:\/\/www.w3.org\/TR\/2008\/WD-html5-20080122\/#video\">proposed &lt;video&gt; tag in HTML5<\/a> invariably make my ears perk up, maybe because it could be perceived &#8212; under the right circumstances &#8212; as alleged competition against what I <a href=\"http:\/\/blogs.adobe.com\/penguin.swf\/\">do at my day job<\/a>. But I&#8217;m still interested in all topics concerning multimedia technology, and this sounds like a big one. Plus, <a href=\"http:\/\/blog.mozilla.com\/blog\/2009\/01\/26\/in-support-of-open-video\/\">Mozilla recently announced<\/a> that it would <a href=\"http:\/\/blog.wikimedia.org\/2009\/01\/26\/mozilla-and-wikimedia-join-forces-to-support-open-video\/\">donate 100 grand to Wikimedia<\/a> to help improve Ogg and Theora.<\/p>\n<p><center><br \/>\n<img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/multimedia.cx\/eggs\/wp-content\/uploads\/2009\/02\/100grand.jpg\" alt=\"100 Grand candy bar\" title=\"100 Grand candy bar\" width=\"229\" height=\"96\" class=\"aligncenter size-full wp-image-1020\" \/><br \/>\n<\/center><\/p>\n<blockquote><p>Quick glossary\/refresher on key terminology: <strong>Vorbis<\/strong> = audio codec; <strong>Theora<\/strong> = video codec; <strong>Ogg<\/strong> = container format that wraps and delivers Vorbis, Theora and several other types of media.<\/p><\/blockquote>\n<p>So, the video tag is supposed to be the promised land of video on the web (just like <a href=\"http:\/\/www.kaourantin.net\/2008\/09\/on-performance.html\">SVG is supposed to be the open answer to Flash<\/a>). I&#8217;m looking at this from a purely pragmatic perspective. Here are 2 big questions about media meant for delivery via the media tag: <\/p>\n<ol>\n<li>How do people create the media?<\/li>\n<li>How do people consume the media?<\/li>\n<\/ol>\n<p>I want to ponder these questions. <!--more--><\/p>\n<p><strong>How do people create the media?<\/strong><\/p>\n<p>I admit, I&#8217;m extremely weak when it comes to content creation. If you were to ask me how to create an Ogg\/Vorbis\/Theora multimedia file for distribution &#8212; as I am asking myself right now &#8212; I would draw quite a blank. So I go straight to the source &#8212; Theora.org FAQ #41: <a href=\"http:\/\/theora.org\/faq\/#41\">How can I encode videos to Theora?<\/a> The answer has 2 links, one of which is broken, and some other example command lines in the body. All of the examples seem to assume that the video production specialist creating this content will be working entirely from a Unix-like command line. True, a lot of pros use Mac OS X which has a Unix foundation. But I have this stereotype that they would prefer something more graphical.<\/p>\n<p>Staying in the realm of command line tools, what about the master multimedia program, the one relied upon my open and closed projects alike? I refer of course to <a href=\"http:\/\/ffmpeg.org\/\">FFmpeg<\/a>. While the program decodes Theora video, it still does not feature a native Theora encoder. Ironically, <a href=\"http:\/\/multimedia.cx\/eggs\/vp3-golden-frame\/\">I have been the biggest champion<\/a> of such a project, but the effort has never really gotten off the ground. FFmpeg does, however, allow a user to compile in support for Xiph&#8217;s libraries. Plus, there is the <a href=\"http:\/\/v2v.cc\/~j\/ffmpeg2theora\/\">ffmpeg2theora<\/a> as another solution.<\/p>\n<p>So the command line approach, on Unix platforms, is pretty well covered. What about GUI-based editors that can encode Theora? I didn&#8217;t bother checking the feature lists for Adobe&#8217;s and Apple&#8217;s current offerings since I take it as a foregone conclusion that neither&#8217;s tools exports Ogg as of yet. I did a little digging and it seems that such a beast actually does exist. <a href=\"http:\/\/lives.sourceforge.net\/\">LiVES<\/a> is out there, and purports to run on Win\/Mac\/Linux. Nice. I can&#8217;t make any statements about how the tool stacks up to proprietary ones since I can barely figure out how to run any video editor at all. I just wanted to learn if a Windows or Mac content creator could actually find a GUI-based video editing tool that could output Theora, should they feel the urge to jump on the free video bandwagon.<\/p>\n<p>Per my understanding, Ogg\/Theora\/Vorbis is not necessarily the standard for the video tag. In fact, <a href=\"http:\/\/www.w3.org\/TR\/2008\/WD-html5-20080122\/#video\">the spec states<\/a>, &#8220;However, there are no known codecs that satisfy all the current players&#8230; This is an ongoing issue and this section will be updated once more information is available.&#8221; Indeed, I have read that, while Apple&#8217;s Safari supports the video tag, it doesn&#8217;t support the Ogg\/Theora\/Vorbis open standard, opting instead for the more popular and widespread QT-MP4\/H.264\/AAC open standard.<\/p>\n<p>So this brings me to my next question:<\/p>\n<p><strong>How do people consume the media?<\/strong><\/p>\n<p>Well, via the HTML video tag, ideally. I have been wanting to take a survey of video tag support in various browsers to see how widely supported this feature is, and to see what it even looks like. All I hear is that the video tag is totally gonna be supported everywhere RSN. Let&#8217;s see how things are shaping up so far.<\/p>\n<p>As advertised, <strong>Mozilla Firefox<\/strong> 3.0.5 (current as of this writing) does not support the video tag, while 3.1 (beta 2 as of this writing) does. I pulled <a href=\"http:\/\/en.wikipedia.org\/wiki\/File:F-35_verticle_landing.ogg\">this Ogg video from Wikipedia<\/a>, put it on a local webserver along with an HTML file wrapping the Ogg filename in a video tag and observed the results:<\/p>\n<p><center><br \/>\n<img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/multimedia.cx\/eggs\/wp-content\/uploads\/2009\/01\/firefox-31b2-video-tag.png\" alt=\"Firefox Video Tag\" title=\"Firefox Video Tag\" width=\"439\" height=\"425\" class=\"aligncenter size-full wp-image-1007\" srcset=\"https:\/\/multimedia.cx\/eggs\/wp-content\/uploads\/2009\/01\/firefox-31b2-video-tag.png 439w, https:\/\/multimedia.cx\/eggs\/wp-content\/uploads\/2009\/01\/firefox-31b2-video-tag-300x290.png 300w\" sizes=\"auto, (max-width: 439px) 100vw, 439px\" \/><br \/>\n<\/center><\/p>\n<p>As suspected, <strong>Apple Safari<\/strong> (3.2.1) on Mac OS X can play a QuickTime file &#8212; any QuickTime file &#8212; via the video tag. Although weird things happen with the position bar if you contain the video in a center tag:<\/p>\n<p><center><br \/>\n<div id=\"attachment_1009\" style=\"width: 364px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-1009\" src=\"http:\/\/multimedia.cx\/eggs\/wp-content\/uploads\/2009\/01\/quicktime-seek-bubble-runs-away.png\" alt=\"Hey! Where are you going, little seek bubble?\" title=\"QuickTime Seek Bubble Bug\" width=\"354\" height=\"250\" class=\"size-full wp-image-1009\" srcset=\"https:\/\/multimedia.cx\/eggs\/wp-content\/uploads\/2009\/01\/quicktime-seek-bubble-runs-away.png 354w, https:\/\/multimedia.cx\/eggs\/wp-content\/uploads\/2009\/01\/quicktime-seek-bubble-runs-away-300x211.png 300w\" sizes=\"auto, (max-width: 354px) 100vw, 354px\" \/><p id=\"caption-attachment-1009\" class=\"wp-caption-text\">Hey! Where are you going, little seek bubble?<\/p><\/div><br \/>\n<\/center><\/p>\n<p>But Safari does not support the Ogg\/Theora\/Vorbis suite.<\/p>\n<p>I thought I had read that <strong>Apple Safari<\/strong> running on the iPod Touch supported the video tag, same as desktop Safari. How wrong I was.<\/p>\n<p>Further, I thought I had read that <strong>Opera<\/strong> now included support for the video tag. But I tried my test page on Opera 9.63 on Linux to no avail. The fallback text is displayed rather than any trace of video.<\/p>\n<p><strong>Internet Explorer<\/strong> 7 on Windows: What&#8217;s your best guess? Of course it doesn&#8217;t have any video tag support.<\/p>\n<p>Finally, I looked at the dark horse contender &#8212; <strong>Google Chrome<\/strong> running under Windows. No video tag support<\/p>\n<p><strong>Final Thoughts<\/strong><br \/>\nI wouldn&#8217;t put much stock in this video tag stuff except for the fact that certain major players like <a href=\"http:\/\/wikipedia.org\/\">Wikipedia<\/a> and the <a href=\"http:\/\/archive.org\/\">Internet Archive<\/a> are keenly interested. Wikipedia has been hosting Ogg\/Theora\/Vorbis media for some time now. When I was doing my <a href=\"http:\/\/multimedia.cx\/eggs\/introducing-moobex\/\">MOOBEX survey<\/a>, I observed that different distros either used the Java-based player method or used a plugin that connected to a native media player, usually Totem. I suspect that the release of Firefox 3.1 will simply see the introduction of a new method for playing back the Ogg files in an embedded manner.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>I am finally investigating exactly what the HTML 5 &lt;video&gt; tag can do<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[223],"tags":[144,146,148,145,147],"class_list":["post-546","post","type-post","status-publish","format-standard","hentry","category-html5","tag-html","tag-ogg","tag-theora","tag-video","tag-vorbis"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/multimedia.cx\/eggs\/wp-json\/wp\/v2\/posts\/546","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/multimedia.cx\/eggs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/multimedia.cx\/eggs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/multimedia.cx\/eggs\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/multimedia.cx\/eggs\/wp-json\/wp\/v2\/comments?post=546"}],"version-history":[{"count":17,"href":"https:\/\/multimedia.cx\/eggs\/wp-json\/wp\/v2\/posts\/546\/revisions"}],"predecessor-version":[{"id":3103,"href":"https:\/\/multimedia.cx\/eggs\/wp-json\/wp\/v2\/posts\/546\/revisions\/3103"}],"wp:attachment":[{"href":"https:\/\/multimedia.cx\/eggs\/wp-json\/wp\/v2\/media?parent=546"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/multimedia.cx\/eggs\/wp-json\/wp\/v2\/categories?post=546"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/multimedia.cx\/eggs\/wp-json\/wp\/v2\/tags?post=546"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}