Slides from my presentation on building your own HTML5 video player at the HTML5 Developer Conference 2012.

1. Building an HTML5 Video Player
HTML5 Developer Conference 2012
#html5video
Steve Heffernan, Video.js & Zencoder & Brightcove
http://videojs.com
@heff @videojs

2. • History
• User Support
• Formats
• Code
• Bugs
• Resources

6. ~2000 ~2008 ~2015

8. Reasons to use HTML5 Video
• It’s the future!
• Runs natively in the browser
• Cleaner code

9. <video src="video.mp4" controls></video>

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

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

14. The ‘Format War’

16. OPEN CLOSED

18. CONTAINER FORMAT
VIDEO CODEC
AUDIO CODEC

19. MP4
H.264
AAC
3+ 9+ 9+

20. OGV
THEORA
VORBIS
3.5+ 3+ 10.5+

21. WEBM
VP8
4+ 6+ 10.6+ VORBIS

23. Three Formats
9+ 3+ 3+ 9+
4+ 6+ 10.6+
3.5+ 3+ 10.5+

24. Two Formats
9+ 3+ 3+ 9+
4+ 6+ 10.6+

25. One Format
9+ 3+ 3+ 9+

26. Handbrake.fr

27. Firefogg.org

28. Zencoder.com

29. Content Protection
• RTMP Streaming • Source Obscurity • Native App
Obscurity
• DRM (Flash • Time/GEO/IP
Access/Smooth limited URLs • HTTP Streaming
Streaming)
• AES Encryption

30. Content Protection
bit.ly/wAkriF

31. <video src="video.mp4" controls></video>

32. <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. <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. <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. <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. •Controls •Autoplay •Tracks
•Poster •Loop
•Preload •Width/Height
<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>

37. Tag Builder
http://videojs.com/tag-builder/

38. JavaScript API
• Attributes
• Functions
• Events

39. JavaScript API
Live Demo!
(good luck)

40. JavaScript API

41. Browser/General Issues
•Autobuffer => Preload
•Cross-browser Load Progress Tracking
•Missing Poster in Some Safari Versions
•HTML5 Browsers Do Not Fallback on
Incompatible Sources

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

43. 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>
SWF Object: http://code.google.com/p/swfobject/

44. Device Quirks: iOS 3
• Needs MP4 as first source.
• iPad Poster Attribute Bug
• iPad JS in Head / iPhone JS not in Head

45. Device Quirks: Android 2.1 / 2.2
• Can’t touch to start
• Type attribute breaks video
• canPlayType function broken
~25% of Android Users

46. Android Touch Start Fix
<script>
if (navigator.userAgent.match(/Android/i) !== null) {
$("video").click(function(){
this.play();
});
}
</script>

47. 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 API
video.src("video.mp4")

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

49. VideoJS.com

50. Video for Everybody
By Kroc Camen

51. Dive into HTML5
By Mark Pilgrim

52. HTML5 Video and Audio in Depth
http://videojs.com/lynda

53. Building an HTML5 Video Player
HTML5 Developer Conference 2012
#html5video
Steve Heffernan, Video.js & Zencoder & Brightcove
http://videojs.com
@heff @videojs