HTML5 VideoNagy Péter

About me

Jobs:oDrupal developer (SZTE)oR&D Software engineer (LogMeIn)

Contact:oE-mail: peternagyxx@gmail.comoTwitter: dumi_peti

HTML5

oRelative new technology

oLot of new HTML tag

oNew JavaScript APIs

oPossibility to build lot more complex web

apps

Multimedia on the web

●The main reason of Flash usage

●Many video sharing and video playing sites

(YouTube, Vimeo, etc.)

The <video> tag

●New HTML5 DOM element

●The key for the video watching

●Similar to the <img> tag

Codecs

●MP4: H.264 + AAC (Safari & IE)

●WebM: VP8 + Vorbis (Chrome & Firefox)

●OGG: Theora + Vorbis

Sources and fallbacks

Display and playback attributes

autoplay

poster

controls

muted

preload

loop

JavaScript API

Methods:video.play()video.pause()video.load()video.canPlayType()

Properties:video.currentTimevideo.durationvideo.volumevideo.muted

Events:onloadstartonplayonpauseonmetaloadeddurationchangevolumechangedseeking

MediaSource API

●Get the video as binary data and append to

the video source

●Full JS control of the video stream

●Ideal for adaptive streaming, time shifting

and video preprocessing

Getting appendable stream

Two way:

●Websocket

●XHR

The response type has to be arraybuffer.

Code snippet

MediaCapture API

●Using the webcam and the mic of the

computer without plugins

●User permission is needed

●The key: navigator.getUserMedia()

Display webcam video

CSS3 filters

Easy to apply on any HTML elementsWe can use SVG filters

Filters:Brightness ConstrastSepiaGreyscaleinvertblur

Take snapshots

●Possible to draw video to canvas

●We have pixel level access to the image

●Easy to write recorder scripts

Possibilities

●Video recording (js webm encoder)

●Webcam photos (with effects)

●Motion detection applications

●WebGL textures

WebRTC API

Real-time P2P communication between browsers

Three main component:●RTCPeerConnection (Chrome 20+, FF

Aurora/Nightly)●MediaStream (Chrome, Opera, FF)●RTCDataChannel (Chrome 26+)

WebRTC client tasks

●Get streaming video or other data

●Exchange network information WebRTC

clients

●Coordinate 'signaling' communication

●Exchange information about media

●Communicate streaming video or data

WebRTC server side tasks

●User discovery and communication

●Signaling

●NAT/firewall traversal

●Relay servers in case peer-to-peer

communication fails

Links - resources● http://www.html5rocks.com/en/tutorials/webrtc/basics/● http://www.html5rocks.com/en/tutorials/webgl/typed_arrays/● http://www.html5rocks.com/en/tutorials/getusermedia/intro/● https://dvcs.w3.org/hg/html-media/raw-file/tip/media-source/media-source.

html● http://updates.html5rocks.com/2011/11/Stream-video-using-the-MediaSour

ce-API● http://www.html5rocks.com/en/tutorials/filters/understanding-css/● http://www.html5rocks.com/en/tutorials/video/basics/

Thank you!