Towards Video on the Web with HTML5 Authors François Daoust, Philipp Hoschka — W3C/ERCIM, Sophia-Antipolis, France Charalampos #$ Patrikakis — School o% El!ctrical an& Co"put!r En'in!!rin', ()*A, Ath!ns, +re!ce Rui S. Cruz, Mário S$ (un!s — IST/I(ESC-ID/I(.V, 0isbon, Portu'al Davi& Sala"a .sborn! — Atos R!search an& Innovation, Ma&ri&, Spain Presenter François Daoust 3%&453$or'6, Worl& Wi&! W!1 Consortiu" This presentation http7//555$53$org/89:9/)alks/:9:;-ht"l<-vi&!o-%&/ :; .cto1!r 89:9, Barc!lona, (EM Su""it )h! r!s!arch l!a&in' to th!s! r!sults has r!c!i2!& %un&in' %ro" th! Europ!an *nion>s S!2!nth Fra"!5ork Pro'ra""! ?FP@/899@-89:3A un&!r 'rant a'r!!"!nt nB8;CDC@ - .p!n M!&ia W!1 ?.MW!1A an& nB8;C;@; SociallE 5ar!, colla1oRati2!, sc la1l! Co&in' "E&ia &istri1utio( ?S R CE(A Outline Photo by Elaine Vallet What is HTML5? Let's make sure we're talking about the same thing… Video on the Web codecs, metadata, streaming, fragments More TV-Relevant Features CSS, SVG, Canvas Web Applications !evice AP#s, $idgets W3C: Shaping the Web of the future Web Standards (X)HTML, CSS, XML, SVG, PNG, XSLT, WCAG, RDF, ... Consortium 330 members, from i !"stry % ! rese%rch World-wide (ffices i ma y co" #ries, i &)"!i * Br%zi), C'i %, - !i%, Morocco, So"#' Afri&%, ... One Web! Fo" !e! % ! !ire&#e! by i ve #or of #'e Web, Tim Berners-Lee Global participation 30,000 1eo1)e subscribe! #o mai)i * )ists, 2,3004 1%rtici1% #s i 504 Gro"1s Part 1: What is HTML5? HTML5, what is it? It's a specification developed by the W3C HTML Working Group: Video on the Web Web applications Canvas new APIs … And more importantly: HTML on the move Disruptive technology The Next Open Web Platform The HTML5 specification is a portion of the next Open Web platform: HTML5 -n exe &atabase CSS 2.1 Web Wor$ers CSS 3 Selectors Web Soc$ets 1rotocol2)1- CSS 3 Me ia !"eries ,eolocation CSS 3 Text Pro%ress 03ents CSS 3 Bac$%ro"n s an Bor ers Element Tra3ersal CSS 3 Colors &OM Le3el 3 03ents CSS 3 2& Transformations Me ia 4ra%ments CSSOM Vie( Mo "le XMLHttp.e6"est CSS 3 Transitions Selectors )1- CSS 3 Animations CSSOM Vie( Mo "le CSS 3 M"lti*Col"mns 4ile )1- CSS +amespaces .&4a SV, 1.1 Micro ata W)-*).-A 1./ WO44 MathML 2./ HTTP 1.1 part 1 to part 7 ECMAScript 5 TLS 1.2 8"p ate 9 2& Context -.- 8"p ate 9 Web,L : Web Stora%e Le%en : spec: e3elope (ithin W3C spec: e3elope o"tsi e of W3C 8-0T4; <hronos ,ro"p; 0CMA9 Quick background on HTML5 History Effort started by Ian Hickson, while working at Opera 2004: Opera, Mozilla, and pple creates the !H " !# 200$: !%& restarts the H"M' !orking #ro(p 20)0: pple, #oogle, Mozilla, Microsoft, and Opera (and others) are imple,enting, or are co,,itted to, H"M'- The HTML working group in W3C &haired by Macie. /tachowiak * pple+, Pa(l &otton *Microsoft+, /am 1(by (IBM) 40 !%& Member organizations, all co,,itted to !%& 1oyalty-4ree terms 4%5 gro(p participants 2-5 Invited Experts *,ost of them p(blic invited experts) )0 mailing lists $--% emails on p(blic-html… since Jan(ary 20)0 Roadmap !%& 'ast &all in May 20)) Part 2: Video on the Web The <video> tag in HTML5 A regular HTML tag <video src="myMovie" id="vid" /> A standard API var vid = document.getElementById("vid"); vid.play(); vid.pause(); vid.currentTime = 0; Interaction with CSS video { border-radius: 2em; translate(100px, -100px) skewY(30deg) scale(0.5,0.5); opacity: 0.5; } Video and Canvas The HTML5 <canvas> tag allows for direct manipulation of video data: Dump video frame to a <canvas> tag Analyse video frame as an array of pixels with JavaScript !eact conse"uently Muppet says: Open Media Web! Video and Vector Graphics W3C Standard released in 2001 (SVG 1.2 released in 2009) SVG is included in HTML5 Co !lete "reedom to redesi#n user interfaces Possi%ility to cli! and "ilter video at (ill Tick! )Clock tickin#+ )tick, tick, tick, …+ 00:05 04:23 CC Audio/Video: Codecs and formats Lots of challenges and patents. Video codec H.264 (profiles?), VP8, Theora, Dirac 2. , ! Audio codec ""#, $%", Vor&is, PCV, ! Captioning, video description '"%(, '%(L, Hi)#aption, #%ML, TT%L, *+PP TS 26.24,, MPSu&, ! Container format .avi, ./p4, .mov, .ogg, .flv, ./0v, ! 1o defa-lt a-dio2video2container format in HTML, for the time &eing. #aptioning format 3ill &e specified &y HT%L,. Projected support in main Web browsers Internet Explorer (>=9) H.264 (profile?) in an MP4 container Safari (desktop iP!one iPad) H.264 Baseline in an MP4 container "irefox Theora in an OGG container VP8 in a We M container #pera Theora in an OGG container VP8 in a We M container $oo%le &!rome H.264 Baseline in an MP4 container Theora in an OGG container VP8 in a We M container At a "ini"#"$ once ro%sers are o#t& One version that #ses VP8 in a We M container (Vor is for a#(io) Another version that #ses H.264 Baseline in an MP4 container (!!) lo% complexity for a#(io) Metadata Many standards MPEG-7, CableLabs, TV-ANytime, EBU, XML, … Ontology for Media Resource 1.0 Last Call worki ! "ra#t, EBU is amo ! $artici$a ts API for Media Resource 1.0 Media fragments Photo by Robert Freund http://www.example.com/example.ogv#xywh=160,120,320,240 http://www.example.com/example.ogv?t=10,20 Streaming Audio/Video Progressive download — basic file transfer HTTP streaming — same with byte range Using other transport protocols — UDP, DCCP and the like HTTP adaptive streaming HTTP Live Streaming by Apple IIS Smooth Streaming by Microsoft for Silverlight Dynamic streaming in Ad be !lash Player "#$" %&PP ada'tive HTTP Streaming (AHS) ('en)P T* ! r+m ,P-& Dynamic Ada'tive Streaming ver HTTP .DASH/ What about browsers that will support WebM? , re standardizati n needed b th at 'rot col level .)ET!1/ and HTML2API level .3%C1/ Web and TV Interest Group at 3%C4 '+blic-web5and-tv@w%$ rg Peer-to-peer connections Ongoing efforts that relate to P2P WebSockets (API and protocol) for text-based connections between a client and a server HTML Device specification extracted from the HTML5 spec o P2P protocol"API in HTML5 so far# $all for actions issued by the editor of the specification in '%ly !()(# Main %se cases Main use cases that will push for P2P Video conferencin+ ,eal-time +ames Peer-to-peer file transfer Part 3: More TV-relevant Features CSS Transitions CSS Transitions describe how CSS properties change smoothly from one value to another over a given duration. Example (CSS transitions must be supported): Home About Feedback Help Contact CSS Media Queries <link rel="stylesheet" type="text/css" href="base.css" /> <style type="text/css" media="screen and (min-width: 481px)"> @import url("advanced.css"); </style> <link rel="stylesheet" type="text/css" href="base.css" media="handheld, only screen and (max-device-width: 480px)" /> Fonts: WOFF File Format « Les représentants du peuple français, constitués en Assemblée nationale, considérant que l'ignorance, l'oubli ou le mépris des droits de l'homme sont les seules causes des malheurs publics et de la corruption des gouvernements, ont résolu d'exposer, dans une déclaration solennelle, les droits naturels, inaliénables et sacrés de l'homme. » (Déclaration des droits de l'Homme et du citoyen de 1789) Towards Web Applications Web vs native Integration with device quoted as one of the main limitations of Web apps Device APIs W3C Widgets Making Web applications: downloadable signable sellable with dedicated user interface Summary HTML5 is the next Open Web platform The <video> tag is almost there No standard audio/video codec and container format in HTML5 for the time being (H !"#/MP4% &$'/WebM and Theora/Ogg as main choices in bro(sers) More standardization needed around streaming No more limits in +raphical ,ser -nterfaces (SVG% /anvas and advanced /..) Po(erful Web Applications possible on multiple devices (desktop% mobile% T&% 2) (Device 0$-s, Widgets) W3C Web on TV Workshop Spring !455% in Europe Thanks François Daoust <[email protected]> World Wide Web Consortium Special thanks to Philippe le "#garet and Domini$ue "aza&l-Massieu) for material in these slides http*++www.w3.org+,-.-+/alks/.-.0'html1-video'fd+ .0 3ctober ,-.-4 Barcelona4 67( Summit 8uestions/Discussion welcome9 Follow the Open Media Web pro:ect* Web site* http*++openmediaweb.eu+ ;SS feed* http*++openmediaweb.eu+feed+ /witter: @w3c_omweb /he research leading to these results has recei2ed funding from the 7uropean <nion=s Se2enth Framewor !rogramme >F!?+,--?',-.3@ under grant agreement nA,0BCB? ' 3pen (edia Web >3(Web@ and nA,0B0?0 SociallD Eware4 collabo;ati2e4 scElable Coding m7dia distributio6 >SE;EC76@.