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 <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="425" height="344" codebase="http://download.macromedia.com/pub/shockwave/cabs/ flash/swflash.cab#version=6,0,40,0"> <param name="allowFullScreen" value="true" /> <param name="allowscriptaccess" value="always" /> <param name="src" value="http://www.youtube.com/v/oHg5SJYRHA0&hl=en&fs=1&" /> <param name="allowfullscreen" value="true" /> <embed type="application/x-shockwave-flash" width="425"height="344" src="http://www.youtube.com/v/oHg5SJYRHA0&hl=en&fs=1&" allowscriptaccess="always" allowfullscreen="true"> </embed> </object> 220 Cyril Concolato PESTO - Technologies Web - Côté Client Audio/video in HTML 5 <audio controls loop autoplay src="file.mp3"/> <video controls poster="sintel.jpg" width="600"> <source src="sintel.mp4" /> <source src="sintel.webm" /> <source src="sintel.ogv" /> </video> 221 Cyril Concolato PESTO - Technologies Web - Côté Client Audio/Video Markup and JS in HTML 5 Basic elements Video-specific attribute • <audio> • @poster • <video> • @height Common attributes or Common JS Interfaces common elements • HTMLMediaElement • @autoplay • HTMLMediaController • @controls • @crossorigin Specific JS interfaces • @loop • HTMLVideoElement • @mediagroup • HTMLAudioElement • @muted • @preload • @src • @width • <source> • <track> 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 NOTHING METADATA IDLE 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 <audio> element & HTMLAudioElement • For simple file playback Using the WebAudio API • For sound manipulations • For real-time processing and analysis • For audio effects 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 <track> element and associated JS API <video controls> <source src="elephants-dream.mp4" type="video/mp4"> <source src="elephants-dream.webm" type="video/webm"> <track label="English subtitles" kind="subtitles" srclang="en" src="elephants-dream-subtitles-en.vtt" default> <track label="Deutsche Untertitel" kind="subtitles" srclang="de" src="elephants-dream-subtitles-de.vtt"> <track label="English chapters" kind="chapters" srclang="en" src="elephants-dream-chapters-en.vtt"> </video> 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) <video src='myvideo.webm#t=50,100'></video> 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 <audio>/<video> elements 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 .