YouTube demos HTML 5
The choice and use of the new video tag in HTML 5 is one of the more explosive sticking points in the evolving standard. Which codecs should browsers use? Why even have a video tag at all when Flash works well currently? Will anyone use it even if it becomes a standard?
YouTube has come to the party with a demonstration page that utilises the video tag rather than Flash. For a seamless experience I found this page works in nightly WebKit builds and some users report that nightly Chrome builds work too. Users of Firefox will have the page render but be unable to play the video as Firefox only supports the Theora codec for playback, whereas WebKit supports the H.264 playback that YouTube is using.
The demo renders the same as the standard YouTube page served up today
(Credit: Chris Duckett/ZDNet.com.au)
Looking at the source code, the cleanliness of the code compared to the traditional 4.01 Transitional page that is served is stark. By way of example, compare the lengthy lines of ugly embed code for the related videos and the new HTML 5 prototype.
The old school of 4.01:
<div class="video-entry ">
<div class="v90WideEntry"><div class="v90WrapperOuter"><div class="v90WrapperInner"><a href="/watch?v=IbLRf0j80wU&feature=related" rel="nofollow"><img title="Iggy Pop - I wanna be your dog - 1979 - live" src="http://i2.ytimg.com/vi/IbLRf0j80wU/default.jpg" class="vimg90" qlicon="IbLRf0j80wU" alt="Iggy Pop - I wanna be your dog - 1979 - live"></a><div class="addtoQL90"><a href="#" ql="IbLRf0j80wU" title="Add Video to QuickList"><button title="" class="master-sprite QLIconImg"
onclick="return onQuickAddClick(this, this.parentNode.getAttribute('ql'), 'http://i2.ytimg.com/vi/IbLRf0j80wU/default.jpg', 'Iggy Pop - I wanna be your dog - 1979 - live')"
onmouseover="mouseOverQuickAdd(this)"
onmouseout="mouseOutQuickAdd(this)"
onmousedown="urchinTracker('/Events/VideoWatch/QuickList+AddTo')"></button></a><div class="hid quicklist-inlist"><a href="/watch_queue?all">Added</a></div></div><div class="video-time"><span>1:13</span></div></div></div></div>
<div class="video-main-content">
<div class="video-mini-title"><a href="/watch?v=IbLRf0j80wU&feature=related" title="Iggy Pop - I wanna be your dog - 1979 - live" rel="nofollow">Iggy Pop - I wanna be your dog - 1979 - live</a></div>
<div class="video-view-count">1,162,584 views</div>
<div class="video-username"><a href="/user/umbrea">umbrea</a></div>
</div>
<div class="video-clear-list-left"></div>
</div>
The new school of HTML 5:
<p class="video-item">
<video class="video-thumb" height="54" autobuffer loop>
<source src="demo/google07_thumb.mp4?2">
</video>
<a class="video-title" href="#">Google Chrome, Japan</a>
<span class="video-viewcount">2,427,313 views</span>
</p>
Another benefit is the reduced number of validation errors between the HTML 4.01 (92) and HTML5 (14).
Now admittedly this demo page does not have the complete functionality implemented and it is highly unlikely that it would be rolled out anytime in the next few years with a fluid standard. Plus major browsers of IE and Firefox will not able to use the page.
It would be a nice option for users with capable browsers to serve up the HTML 5 version where appropriate and the ability to fallback to the old HTML for others. Doing this would allow Google to slap a huge "viewed better in Chrome" sticker on YouTube; a great way to push up the company's browser usage percentage.