Technologies Web Côté client
INF228
Cyril Concolato – 2013
Cyril Concolato Multimedia and the Web
218 Cyril Concolato PESTO - Technologies Web - Côté Client Multimedia Formats on the Web
Images • JPG, PNG, GIF, SVG, WebP, SVG Video • Container vs. Codec • Containers: MP4, OGG, MPEG-2, WebM… • Codecs: H264/AVC, DiVX, Theora, VP8, VP9… Audio • AAC, MP3, Opus, Vorbis,… « Royalty-free »
219 Cyril Concolato PESTO - Technologies Web - Côté Client Audio/video the old way
220 Cyril Concolato PESTO - Technologies Web - Côté Client Audio/video in HTML 5
221 Cyril Concolato PESTO - Technologies Web - Côté Client Audio/Video Markup and JS in HTML 5
Basic elements Video-specific attribute •
Common attributes or Common JS Interfaces common elements • HTMLMediaElement • @autoplay • HTMLMediaController • @controls • @crossorigin Specific JS interfaces • @loop • HTMLVideoElement • @mediagroup • HTMLAudioElement • @muted • @preload • @src • @width •
222 Cyril Concolato PESTO - Technologies Web - Côté Client HTML 5 Media Events
State machines associated to each media element Network Status Playback Status
NETWORK NETWORK HAVE HAVE EMPTY IDLE NOTHING METADATA
HAVE HAVE FUTURE CURRENT NETWORK DATA DATA LOADING NETWORK NO_SOURCE HAVE ENOUGH Events to monitor DATA • Network & Download progress • Decoding & Playback progress http://www.w3.org/2010/05/video/mediaevents.html
223 Cyril Concolato PESTO - Technologies Web - Côté Client Audio on the Web
Using the
http://www.html5rocks.com/en/tutorials/webaudio/intro/
224 Cyril Concolato PESTO - Technologies Web - Côté Client Subtitles on the Web
The WebVTT format
WEBVTT
Cue-1 00:00:15.000 --> 00:00:18.000 At the left we can see...
AnotherCue 00:00:16.000 --> 00:00:30.000 And some other text
225 Cyril Concolato PESTO - Technologies Web - Côté Client HTML 5 Timed Text Tracks
New
226 Cyril Concolato PESTO - Technologies Web - Côté Client Media Fragments
Ability to address a particular time in a video streams • Hyperlinking with videos (youtube-like)
227 Cyril Concolato PESTO - Technologies Web - Côté Client JavaScript players
JWPlayer • http://www.longtailvideo.com/jw-player/ Video.js • http://www.videojs.com/ MediaElement.js • http://mediaelementjs.com/ Popcorn.js • http://popcornjs.org/demos …
228 Cyril Concolato PESTO - Technologies Web - Côté Client Video on the internet
US download statistics for fixed Internet Access
Facebook 1% Other Flash Video 22% Netflix 2% 32% SSL 2% iTunes 2% Hulu 2% YouTube HTTP 17% MPEG 11% 3% BitTorrent Source: Sandvine 6% 1H 2013
229 Cyril Concolato PESTO - Technologies Web - Côté Client Video on Mobile
230 Cyril Concolato PESTO - Technologies Web - Côté Client Video Streaming Technologies on the Web
Progressive download & playback of a file
Adaptive Streaming • Download and play multiple small files seamlessly • Today’s technologies ─ Apple HTTP Live Streaming (HLS) ─ Microsoft Smooth Streaming (MSS) ─ Adobe HDS ─ MPEG-DASH using MediaSource API
231 Cyril Concolato PESTO - Technologies Web - Côté Client HTML5 MediaSource API
W3C Recommendation in progress • Extension to the HTML5 recommandation HTML • Enables adaptive streaming in Web Browsers JavaScript API • Controlling media decoding buffers ─ Add, delete media data • Supported by Google Chrome, MS IE 11, (Firefox) JavaScrip-based players • DASH.js: http://dashif.org/reference/players/javascript/1.0.0/index.html • DASH-JS: http://www-itec.uni-klu.ac.at/dash/?page_id=746 • YouTube: http://dash-mse-test.appspot.com/dash-player.html
232 Cyril Concolato PESTO - Technologies Web - Côté Client DRM on the Web
HTML 5 Tentative Encrypted Media Extensions specifications
233 Cyril Concolato PESTO - Technologies Web - Côté Client Using a webcam in Web content
Applications • No Skype plugin • Voice over IP, Video Conference
Two standards • HTML Media Capture Interface ─ Capture the audio/video streams from the microphone and camera ─ Hook them onto HTML 5
WebRTC • Real time communication between browsers ─ Exchange audio/video compress streams and data
Demo http://www.html5rocks.com/en/tutorials/getusermedia/intro/
234 Cyril Concolato PESTO - Technologies Web - Côté Client The Multimedia Web on TV
241 Cyril Concolato PESTO - Technologies Web - Côté Client HbbTV and Web Standards
v1.0 • HTML ─ Based on CE-HTML/CEA 2014 ─ xHTML 1.0 transitionnal (w/ some modifications) • CSS ─ Based on CEA 2014, CSS TV profile • ECMA-Script ─ TV profile (JavaScript without eval) v1.5 / v2.0 • Adaptive streaming & web subtitles • HTML 5 Canvas & CSS 3 animations
245 Cyril Concolato PESTO - Technologies Web - Côté Client Questions?
248 Cyril Concolato PESTO - Technologies Web - Côté Client