Technologies Web Côté client INF228 2013
Multimedia and the Web 218
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
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
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
Audio/Video Markup and JS in HTML 5 Basic elements <audio> <video> Common attributes or common elements @autoplay @controls @crossorigin @loop @mediagroup @muted @preload @src @width <source> <track> Video-specific attribute @poster @height Common JS Interfaces HTMLMediaElement HTMLMediaController Specific JS interfaces HTMLVideoElement HTMLAudioElement 222
HTML 5 Media Events State machines associated to each media element Network Status Playback Status NETWORK EMPTY NETWORK IDLE HAVE NOTHING HAVE METADATA NETWORK LOADING NETWORK NO_SOURCE Events to monitor Network & Download progress Decoding & Playback progress HAVE FUTURE DATA HAVE ENOUGH DATA HAVE CURRENT DATA http://www.w3.org/2010/05/video/mediaevents.html 223
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
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
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
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
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
Video on the internet US download statistics for fixed Internet Access Facebook 1% Flash Video 2% SSL 2% itunes 2% Hulu 2% MPEG 3% BitTorrent 6% Other 22% HTTP 11% Netflix 32% YouTube 17% Source: Sandvine 1H 2013 229
Video on Mobile 230
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
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
DRM on the Web HTML 5 Tentative Encrypted Media Extensions specifications 233
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
The Multimedia Web on TV 241
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
Questions? 248