Côté client

(1)

Technologies Web Côté client

INF228

Cyril Concolato – 2013

(2)

Multimedia and the Web

(3)

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 »

(4)

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>

(5)

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>

(6)

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

(7)

HTML 5 Media Events

 State machines associated to each media element

 Events to monitor

• Network & Download progress

• Decoding & Playback progress

http://www.w3.org/2010/05/video/mediaevents.html

NETWORK

EMPTY NETWORK

IDLE

NETWORK

LOADING NETWORK

NO_SOURCE

Network Status

HAVE NOTHING

HAVE METADATA

HAVE FUTURE

DATA

HAVE CURRENT

DATA

Playback Status

HAVE ENOUGH

DATA

(8)

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/

(9)

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

(10)

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>

(11)

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>

(12)

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

 …

(13)

Video on the internet

Netflix 32%

YouTube HTTP 17%

11%

BitTorrent 6%

MPEG 3%

Hulu 2%

iTunes 2%

SSL 2%

Flash Video 2%

Facebook

1% Other

22%

US download statistics for fixed Internet Access

Source: Sandvine

1H 2013

(14)

Video on Mobile

(15)

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

(16)

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

(17)

DRM on the Web

 HTML 5 Tentative Encrypted Media Extensions

specifications

(18)

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

(19)

The Multimedia Web on TV

(20)

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

(21)

Questions?