Building an HTML5 Video PlayerSteve Heffernan, Video.js & Zencoder & Brightcovehttp://videojs.com @heff @videojs

© 2013 Brightcove Inc.

Agenda

History

User Support

Formats

Code

Bugs

Future

Resources

2 | Confidential

© 2013 Brightcove Inc.3 | Confidential

© 2013 Brightcove Inc.4 | Confidential

© 2013 Brightcove Inc.5 | Confidential

© 2013 Brightcove Inc.6 | Confidential

~2008~2000 ~2015

© 2013 Brightcove Inc.7 | Confidential

© 2013 Brightcove Inc.

Reasons to use HTML5 Video

It’s the future!

Runs natively in the browser

Cleaner code

8 | Confidential

© 2013 Brightcove Inc.9 | Confidential

<video src=“video.mp4” controls></video>

© 2013 Brightcove Inc.

<video controls>

<source src=“video.mp4” type=“video/mp4”>

<source src=“video.webm” type=“video/webm”>

<source src=“video.ogv” type=“video/ogg”>

<object type=“application/x-shockwave-flash” data=“flash.swf”><param name=“movie” value=“flash.swf” />

<param name=“flashvars” value=“file=video.mp4” />

</object>

</video>

10 | Confidential

© 2013 Brightcove Inc.11 | Confidential

© 2013 Brightcove Inc.12 | Confidential

© 2013 Brightcove Inc.13 | Confidential

http://blog.mefeedia.com/html5-dec-2011

© 2013 Brightcove Inc.

The ‘Format War’

14 | Confidential

© 2013 Brightcove Inc.15 | Confidential

© 2013 Brightcove Inc.16 | Confidential

OPEN CLOSED

© 2013 Brightcove Inc.17 | Confidential

© 2013 Brightcove Inc.18 | Confidential

© 2013 Brightcove Inc.19 | Confidential

CONTAINER FORMAT

VIDEO CODEC

AUDIO CODEC

© 2013 Brightcove Inc.20 | Confidential

9+ 9+3+

MP4

H.264

AAC

© 2013 Brightcove Inc.21 | Confidential

OGV

THEORA

VORBIS

3+ 10.5+3.5+

© 2013 Brightcove Inc.22 | Confidential

WEBM

VP8

VORBIS

6+ 10.6+4+

© 2013 Brightcove Inc.23 | Confidential

© 2013 Brightcove Inc.24 | Confidential

6+ 10.6+4+

3+ 10.5+3.5+

9+9+ 3+ 3+

Three Formats

© 2013 Brightcove Inc.25 | Confidential

6+ 10.6+4+

9+9+ 3+ 3+

Two Formats

© 2013 Brightcove Inc.26 | Confidential

9+9+ 3+ 3+

One Format

© 2013 Brightcove Inc.27 | Confidential

Handbrake.fr

© 2013 Brightcove Inc.28 | Confidential

Firefogg.org

© 2013 Brightcove Inc.29 | Confidential

Zencoder.com

© 2013 Brightcove Inc.

Content Protection

RTMP Streaming

DRM (Flash Access/Smooth Streaming)

30 | Confidential

Source Obscurity

Time/GEO/IP limited URLs

Native App Obscurity

HTTP Streaming

AES Encryption

© 2013 Brightcove Inc.31 | Confidential

Content Protection

bit.ly/wAkriF

© 2013 Brightcove Inc.32 | Confidential

<video src=“video.mp4” controls></video>

© 2013 Brightcove Inc.

<video controls>

<source src=“video.mp4” type=“video/mp4”>

<source src=“video.webm” type=“video/webm”>

<source src=“video.ogv” type=“video/ogg”>

</video>

33 | Confidential

© 2013 Brightcove Inc.

<video controls>

<source src=“video.mp4” type=“video/mp4”>

<source src=“video.webm” type=“video/webm”>

<source src=“video.ogv” type=“video/ogg”>

</video>

34 | Confidential

© 2013 Brightcove Inc.

<video controls>

<source src=“video.mp4” type=“video/mp4”>

<source src=“video.webm” type=“video/webm”>

<source src=“video.ogv” type=“video/ogg”>

<object type=“application/x-shockwave-flash” data=“flash.swf”><param name=“movie” value=“flash.swf” />

<param name=“flashvars” value=“file=video.mp4” />

</object>

</video>

35 | Confidential

© 2013 Brightcove Inc.

<video controls>

<source src=“video.mp4” type=“video/mp4”>

<source src=“video.webm” type=“video/webm”>

<source src=“video.ogv” type=“video/ogg”>

<object type=“application/x-shockwave-flash” data=“flash.swf”><param name=“movie” value=“flash.swf” />

<param name=“flashvars” value=“file=video.mp4” />

<img src=“image.jpg” alt=“title” title=“Can’t play video” />

</object>

</video>

<p>

<strong>Download Video:</strong>

<a href=“video.mp4”>MP4</a>

<a href=“video.ogv”>Ogg</a>

</p>

36 | Confidential

© 2013 Brightcove Inc.37 | Confidential

Controls

Poster

Preload

Autoplay

Loop

Width/Height

Tracks

<video controls autoplay loop width=“480” height=“270” poster=“poster.png” preload=“auto”>

<source src=“video.mp4” type=“video/mp4”>

<track kind=“captions” src=“captions.vtt” srclang=“en”>

</video>

© 2013 Brightcove Inc.38 | Confidential

Tag Builder

http://videojs.com/tag-builder/

© 2013 Brightcove Inc.

JavaScript API

Attributes

Functions• Events

39 | Confidential

© 2013 Brightcove Inc.

Browser/General Issues

• Autobuffer => Preload• Cross-browser Load Progress Tracking• Missing Poster in Some Safari Devices• HTML5 Browsers Do Not Fallback on Incompatible Sources

40 | Confidential

© 2013 Brightcove Inc.

<video controls>

<source src=“video.mp4” type=“video/mp4”>

<source src=“video.webm” type=“video/webm”>

<source src=“video.ogv” type=“video/ogg”>

<object type=“application/x-shockwave-flash” data=“flash.swf”><param name=“movie” value=“flash.swf” />

<param name=“flashvars” value=“file=video.mp4” />

</object>

</video>

41 | Confidential

© 2013 Brightcove Inc.

Determine Video Support

<script>

var vidTag = document.createElement(“video”),

flashVersion = swfobject.getFlashPlayerVersion();

if (vidTag.canPlayType && vidTag.canPlayType(“video/mp4”)) {

// Video Tag

} else if (flashVersion.major > 9){

// Flash Object

} else {

// No Video Support

</script>

42 | Confidential

SWF Object: http://code.google.com/p/swfobject/

© 2013 Brightcove Inc.

Device Quirks: iOS 3

• Needs MP4 as first source. iPad Poster Attribute Bug• iPad JS in Head / iPhone JS not in Head

43 | Confidential

© 2013 Brightcove Inc.

Device Quirks: Android 2.1 / 2.2

• Can’t touch to start Type attribute breaks video• canPlayType function broken• ~25% of Android Users

44 | Confidential

© 2013 Brightcove Inc.

Android Touch Start Fix

45 | Confidential

<script>

if (navigator.userAgent.match(/Android/i) !== null) {

$(“video”).click(function(){

this.play();

});

}

</script>

© 2013 Brightcove Inc.

Android Type Attribute Fix Options

• Don’t include type attribute Don’t use source tags<video src=“video.mp4” controls></video>

• Set source through JS APIvideo.src(“video.mp4”)

46 | Confidential

© 2013 Brightcove Inc.

Android canPlayType Fix

<script>

Var androidMatch = navigator.userAgent.match(/Android (\d+\./i);

if (androidMatch && androidMatch[1] < 3) {

//Overwrite canPlayType

document.createElement(“video”)

.constructor.prototype.canPlayType = function(type){

if (type && type.toLowerCase()>indexOf(“video/mp4”) !== -1) {

return “maybe”;

} else { return “”;

}

};

}

</script>

47 | Confidential

© 2013 Brightcove Inc.

The Future of HTML5 Video

• Content Protection - Encrypted Media Extensions• Adaptive Streaming - Media Source Extensions• Timed Text/Events - WebVTT• Video Chat - WebRTC• New Formats/Codecs - VPnext, h.265, Opus, TransOgg

48 | Confidential

© 2013 Brightcove Inc.49 | Confidential

VideoJS.com

© 2013 Brightcove Inc.50 | Confidential

Video for Everybody by Krox Camen

© 2013 Brightcove Inc.51 | Confidential

Dive into HTML 5 by Mark Pilgrim

© 2013 Brightcove Inc.

HTML5 Video and Audio in Depth

52 | Confidential

http://videojs.com/lynda

© 2013 Brightcove Inc.53 | Confidential

http://videojs.com

@heff @videojs

Building an HTML5 Video Player

Brightcove Webcast, March 2013

Steve Heffernan, Video.js & Zencoder & Brightcove

Thank you