Transcript
Page 1: HTML Media: Where We Are & Where We Need To Go

Web & mobile evangelist at Microsoft NZ

Motivated by big ideas & unconventional execution

Auckland based Mozilla Developer

Works on HTML5 video & audio Firefox support

Sponsored by

Page 2: HTML Media: Where We Are & Where We Need To Go
Page 3: HTML Media: Where We Are & Where We Need To Go
Page 4: HTML Media: Where We Are & Where We Need To Go

<audio <video

src= src= The url to the audio or video

width= The width of the video element

height= The height of the video element

poster= The url to the thumbnail of the video

preload= preload= (none, metadata, auto) Start downloading

autoplay autoplay Audio or video should play immediately

loop loop Audio or video should return to start and play

controls controls Will show controls (play, pause, scrub bar)

> >

… …

</audio> </video>

Page 6: HTML Media: Where We Are & Where We Need To Go

• application/octet-stream

• video/mp4, video/ogg, video/webm

•• Fall-back content only displayed by browsers that do not support the <video> element

• If the browser supports video but not the given codec, fall-back code won’t fire.

•• Content should be served from a HTTP 1.1-compatible web server to enable seek

ahead.

• Otherwise you must encode the video with key index frames in the file & not at the end.

Page 7: HTML Media: Where We Are & Where We Need To Go
Page 8: HTML Media: Where We Are & Where We Need To Go
Page 9: HTML Media: Where We Are & Where We Need To Go
Page 10: HTML Media: Where We Are & Where We Need To Go
Page 11: HTML Media: Where We Are & Where We Need To Go
Page 12: HTML Media: Where We Are & Where We Need To Go
Page 13: HTML Media: Where We Are & Where We Need To Go

video {

position: relative;

border-radius:

200px 50px 200px 50px;

box-shadow:

#244766 10px 10px 10px;

transform: rotate(5deg)

translate(15px,10px);

}

Page 14: HTML Media: Where We Are & Where We Need To Go

Sublime Video – Player as a Service

JW Player

mediaelement.js

LeanBack Player – Keyboard Support

Page 15: HTML Media: Where We Are & Where We Need To Go
Page 17: HTML Media: Where We Are & Where We Need To Go
Page 19: HTML Media: Where We Are & Where We Need To Go

Apple’s

HTTP Live Streaming

Microsoft’s

Smooth Streaming

Adobe’s

HTTP Dynamic Streaming

Page 20: HTML Media: Where We Are & Where We Need To Go

• royalty-free?

• parts of the mechanisms used to protect content may still be up for standardization

Page 21: HTML Media: Where We Are & Where We Need To Go

Recommended