{"id":1715,"date":"2009-08-18T08:02:05","date_gmt":"2009-08-18T07:02:05","guid":{"rendered":"http:\/\/www.itwriting.com\/blog\/1715-bbc-trying-out-html-5-video-element.html"},"modified":"2009-08-18T08:02:05","modified_gmt":"2009-08-18T07:02:05","slug":"bbc-trying-out-html-5-video-element","status":"publish","type":"post","link":"https:\/\/www.itwriting.com\/blog\/1715-bbc-trying-out-html-5-video-element.html","title":{"rendered":"BBC trying out HTML 5, video element"},"content":{"rendered":"<p>The BBC has an <a href=\"http:\/\/open.bbc.co.uk\/rad\/projects\/html5\" target=\"_blank\">HTML 5 demonstration<\/a> using the video element. The video itself is encoded in both Ogg and H.264. In the screenshot below I have just clicked on a navigation image to jump to a specific place in the video. The demonstration is meant to work in Firefox, Safari and Chrome, though for me it only ran in Firefox (3.5).<\/p>\n<p><img decoding=\"async\" src=\"http:\/\/www.itwriting.com\/images\/bbc-html5.png\" alt=\"\" \/><\/p>\n<p>There is a detailed comment from the BBC\u2019s Sam Dutton on why the proof of concept was put together <a href=\"http:\/\/www.bbc.co.uk\/blogs\/rad\/2009\/08\/html5.html\" target=\"_blank\">here<\/a>. There is an interesting remark on why the BBC is interested in this approach, which does not require a plugin like Adobe Flash or Microsoft Silverlight:<\/p>\n<blockquote><p>Flash and other Rich Internet Applications (RIAs) provide something like this already via timeline scripting, but RIAs are &#8216;black boxes&#8217;, using compilers and obfuscators to hide code and data: great if you want to protect intellectual property, whereas we needed to provide a mechanism whereby data and the code acting on it were open and accessible. HTML 5 and the jQuery JavaScript framework gave us the tools we needed without requiring extra plugins or proprietary software.<\/p><\/blockquote>\n<p>From a technical perspective, Dutton remarks that the HTML 5 solution is more efficient if you want to synchronize other elements with the playing video:<\/p>\n<blockquote><p>The HTML 5 audio and video elements remove the need for player plugins, work like any other HTML element in terms of styling and positioning, and standardise the programming interface for playback control. Less well known is that these elements emit a timeupdate event (at a frequency adjusted to fit available processing and memory) which removes the need to poll a player for the current time position. This makes media scripting far more efficient, since there is no need to run a loop or use setTimeout. In tests run on several machines we found that timeupdate events are emitted regularly and frequently (particularly in Firefox), whereas polling a media player for current video time is unreliable.<\/p><\/blockquote>\n<p>Dutton adds:<\/p>\n<blockquote><p>&#8230; it&#8217;s early days for us on this and there are a number of serious challenges before this becomes anything near mainstream &#8211; if ever.<\/p><\/blockquote>\n<p>The BBC is an influential site and its experiments will attract keen interest from those watching the evolution of web video.<\/p>\n<div id=\"scid:0767317B-992E-4b12-91E0-4F059A8CECA8:c5060bed-0ec9-435e-85a3-a4dbcf625d43\" class=\"wlWriterEditableSmartContent\" style=\"padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; float: none; padding-top: 0px\">Technorati Tags: <a rel=\"tag\" href=\"http:\/\/technorati.com\/tags\/adobe\">adobe<\/a>,<a rel=\"tag\" href=\"http:\/\/technorati.com\/tags\/microsoft\">microsoft<\/a>,<a rel=\"tag\" href=\"http:\/\/technorati.com\/tags\/flash\">flash<\/a>,<a rel=\"tag\" href=\"http:\/\/technorati.com\/tags\/bbc\">bbc<\/a>,<a rel=\"tag\" href=\"http:\/\/technorati.com\/tags\/video\">video<\/a>,<a rel=\"tag\" href=\"http:\/\/technorati.com\/tags\/firefox\">firefox<\/a>,<a rel=\"tag\" href=\"http:\/\/technorati.com\/tags\/chrome\">chrome<\/a>,<a rel=\"tag\" href=\"http:\/\/technorati.com\/tags\/safari\">safari<\/a><\/div>\n","protected":false},"excerpt":{"rendered":"<p>The BBC has an HTML 5 demonstration using the video element. The video itself is encoded in both Ogg and H.264. In the screenshot below I have just clicked on a navigation image to jump to a specific place in the video. The demonstration is meant to work in Firefox, Safari and Chrome, though for &hellip; <a href=\"https:\/\/www.itwriting.com\/blog\/1715-bbc-trying-out-html-5-video-element.html\" class=\"more-link\">Continue reading <span class=\"screen-reader-text\">BBC trying out HTML 5, video element<\/span> <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4,11,34,36,44,54,58,77,96],"tags":[],"class_list":["post-1715","post","type-post","status-publish","format-standard","hentry","category-adobe","category-bbc","category-flash","category-google","category-internet","category-media","category-multimedia","category-silverlight","category-web-authoring"],"_links":{"self":[{"href":"https:\/\/www.itwriting.com\/blog\/wp-json\/wp\/v2\/posts\/1715","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.itwriting.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.itwriting.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.itwriting.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.itwriting.com\/blog\/wp-json\/wp\/v2\/comments?post=1715"}],"version-history":[{"count":0,"href":"https:\/\/www.itwriting.com\/blog\/wp-json\/wp\/v2\/posts\/1715\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.itwriting.com\/blog\/wp-json\/wp\/v2\/media?parent=1715"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.itwriting.com\/blog\/wp-json\/wp\/v2\/categories?post=1715"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.itwriting.com\/blog\/wp-json\/wp\/v2\/tags?post=1715"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}