Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
branch: master
Fetching contributors…

Cannot retrieve contributors at this time

172 lines (143 sloc) 4.459 kb

HTML5 Video 101

  • Exploring the possibilities of the HTML5 video element
  • Interactive session
  • At the last moment…
  • Introduction
  • Examples
  • How the VPRO is (not) using it

About me

  • Frontend developer VPRO
  • Cultural advisor Wikimedia
  • @huskyr
  • github

VPRO

  • Public broadcaster
  • Television, Radio, Guide, Digital
  • Digital since 1994
  • Audio / video core business
  • Open source (Apache, CouchDB)

VPRO ca 1994

VPRO 2010

Why use HTML5 <video>?

  • First-class citizen in HTML
  • Native to the browser
    • No plugin hell
  • No DRM
  • One codebase for everything
  • Multiple competing implementations
    • If you don't like <video> in browser x, switch to browser z
  • Better performance (in some browsers, some systems)
  • Ready for the (mobile) future
  • Works on iPad :)

Other cool stuf

Introduction

Code

<video src="video.ogg" controls>I can not haz HTML5 video :(</video>

Code

<video src="video.ogg" width=640 height=480 preload autoplay controls/>

Code

  • As simple as that?
  • No :(

Codecs, codecs, codecs

  • OGG Theora (Firefox / Opera / Chrome)
  • H264 / MPEG4 (Safari / IE / Chrome)
  • WebM (Firefox / Opera / Chrome)

OGG / WebM

  • Open source
  • Patent free (probably)
  • Used on Wikipedia

H264 / MPEG4

  • Closed
  • Might need a license
  • Works on iOS

Real world code

<!-- From http://diveintohtml5.org/video.html#markup -->
<video width="320" height="240" controls>
    <source src="pr6.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
    <source src="pr6.webm" type='video/webm; codecs="vp8, vorbis"'>
    <source src="pr6.ogv" type='video/ogg; codecs="theora, vorbis"'>
    <!-- Some Flash fallback -->
</video>

Making things easier

JavaScript

Using JavaScript

Example

Video at VPRO

  • Lots of video
  • Most of it in Windows Media formats
  • Some of it in H264
  • Realvideo :)
  • So.. no HTML5?

Canvas

  • It gets more complicated
  • Silverlight player for stuff on UitzendingGemist.nl
  • But not everything is on UitzendingGemist.nl…
  • Two different players?
  • Different interfaces?

Abstraction

  • Abstract away what's video and what's a certain technology
  • 'duration', 'currentTime', 'vidpos', etc
  • We need a generic API for video interfacing

Surprise…

HTML5 <video>

API

  • A generic API for controlling videos
  • Standard events

How?

  • One generic jQuery plugin: jquery.htmlplayer
  • Lots of canvas plugins that abstract away specific technology to generic API
    • jquery.slmediacanvas --> Generic Silverlight player
    • jquery.ugslmediacanvas --> Uitzending Gemist player
    • jquery.htmlvideomediacanvas --> HTML5 video
  • Could do this with any other video canvas
  • YouTube, or even a slideshow
  • A little CSS, a few images
  • There you have it!

Real world

Thanks!

Slides available under CC-BY-SA 3.0

Jump to Line
Something went wrong with that request. Please try again.