A little presentation about HTML5 video capabilities. SzegedTech Meetup 2013. A video from the presentation available here in Hungarian: https://www.youtube.com/watch?v=1D6QHpEcPzA

1. HTML5 Video
Nagy Péter

2. About me
Jobs:
oDrupal developer (SZTE)
oR&D Software engineer (LogMeIn)
Contact:
oE-mail: peternagyxx@gmail.com
oTwitter: dumi_peti

3. HTML5
oRelative new technology
oLot of new HTML tag
oNew JavaScript APIs
oPossibility to build lot more complex web
apps

4. Multimedia on the web
●The main reason of Flash usage
●Many video sharing and video playing sites
(YouTube, Vimeo, etc.)

5. The <video> tag
●New HTML5 DOM element
●The key for the video watching
●Similar to the <img> tag

6. Codecs
●MP4: H.264 + AAC (Safari & IE)
●WebM: VP8 + Vorbis (Chrome & Firefox)
●OGG: Theora + Vorbis

7. Sources and fallbacks

8. Display and playback attributes
autoplay
poster
controls
muted
preload
loop

9. JavaScript API
Methods:
video.play()
video.pause()
video.load()
video.canPlayType()
Properties:
video.currentTime
video.duration
video.volume
video.muted
Events:
onloadstart
onplay
onpause
onmetaloaded
durationchange
volumechanged
seeking

10. 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

11. Getting appendable stream
Two way:
●Websocket
●XHR
The response type has to be arraybuffer.

12. Code snippet

13. MediaCapture API
●Using the webcam and the mic of the
computer without plugins
●User permission is needed
●The key: navigator.getUserMedia()

14. Display webcam video

15. CSS3 filters
Easy to apply on any HTML elements
We can use SVG filters
Filters:
Brightness
Constrast
Sepia
Greyscale
invert
blur

16. Take snapshots
●Possible to draw video to canvas
●We have pixel level access to the image
●Easy to write recorder scripts

17. Possibilities
●Video recording (js webm encoder)
●Webcam photos (with effects)
●Motion detection applications
●WebGL textures

18. WebRTC API
Real-time P2P communication between
browsers
Three main component:
●RTCPeerConnection (Chrome 20+, FF
Aurora/Nightly)
●MediaStream (Chrome, Opera, FF)
●RTCDataChannel (Chrome 26+)

19. 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

20. WebRTC server side tasks
●User discovery and communication
●Signaling
●NAT/firewall traversal
●Relay servers in case peer-to-peer
communication fails

21. 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-
MediaSource-API
● http://www.html5rocks.com/en/tutorials/filters/understanding-css/
● http://www.html5rocks.com/en/tutorials/video/basics/

22. Thank you!