Post on 20-Jun-2015
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.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