Slide 1
Slide 1 text
No content
Slide 2
Slide 2 text
Who is this guy?
Derek Springer
Code Wrangler, Automattic
@derekspringer
Used to build satellite
plugins, now I build
WordPress plugins
Slide 3
Slide 3 text
Overview
`
1) Why use HTML5 media?
2) Welcome to the Wild West
3) The good, the bad, & the ugly of HTML5 media
4) Using HTML5 media
5) HTML5 media in WordPress
6) Stuff to check out
Slide 4
Slide 4 text
Two sides to This coin
1) Playing the media.
2) Hosting the media.
Slide 5
Slide 5 text
Questions!
`
Slide 6
Slide 6 text
How many folks have consumed
online media in the last week?
Slide 7
Slide 7 text
How many folks have consumed
HTML5 media in the last week?
Slide 8
Slide 8 text
How many folks have use HTML5
media on their site?
Slide 9
Slide 9 text
How many folks have an idea what
HTML5 media elements exist?
Slide 10
Slide 10 text
Does anyone have any thoughts on
why you would want to support
HTML5 media on your site?
Slide 11
Slide 11 text
Why use HTML5 media?
●
You want to support iOS/Apple & other mobile
products.
●
You hate Flash.
●
and tags are a mess.
●
Looking to use cutting edge web tech.
●
Board meeting bullet point.
●
You want to be a “cool kid.”
Slide 12
Slide 12 text
`
Slide 13
Slide 13 text
HTML5: The Wild west
Here's what we have now:
●
element
– H.264* (mp4)
– Theoria (ogg)
– VP8 (WebM)
●
element
– MPEG-1 Audio Layer 3* (mp3)
– Advance Audio Coding* (aac)
– Vorbis (ogg)
Note: none are *required* to be supported in HTML5!
Flash
*licensed
Slide 14
Slide 14 text
Browser Support
Slide 15
Slide 15 text
Compatibility
Slide 16
Slide 16 text
No content
Slide 17
Slide 17 text
The Good
●
Simple, robust, and standard(ish) way to
include audio & video on a page.
●
You can still fall back to Flash (or vice versa).
●
Support for mobile devices.
– Easy to send different files optimized for different
devices.
●
Ability to create custom skins and controls.
– Super controllable w/ JavaScript.
●
Built-in accessibility options.
Slide 18
Slide 18 text
The Bad
●
No browser supports every media format.
– Some browsers don't support the *most* popular
formats. (Even Chrome and Chromium aren't equal)
●
More formats means each more effort.
– Time, hosting, code, etc.
●
HTML5 spec is still in flux.
– Lots of vendor-specific implementations & hacks.
Slide 19
Slide 19 text
The Ugly
●
It is up to you to know which browsers support
which containers and codecs.
●
If you want maximum compatibility you have to use
licensed codecs.
●
Two letters: IE
– <= IE 8 – Nope!
– IE 9 – User must install compatibility plugins
●
Copy protection is not dealt with in HTML5, so if
you need DRM you're out of luck.
●
After all is said and done you might *still* have to
use Flash.
Slide 20
Slide 20 text
No content
Slide 21
Slide 21 text
maximum compatibility
1) Make one version that uses WebM.
2) Make another version that uses H.264 baseline
video and AAC “low complexity” audio in an
MP4 container.
3) Make another version that uses Theora video
and Vorbis audio in an Ogg container.
4) Link to all three video files from a single
element, and fall back to a Flash-based
video player.
Slide 22
Slide 22 text
Sane compatibility
●
Video
– WebM + H.264
●
Audio
– MP3 + Vorbis
●
Free
– WebM, Theora, Vorbis
Slide 23
Slide 23 text
Draw! (Using HTML5)
Slide 24
Slide 24 text
What you need
1) A source (The only requirement!)
– The more sources of various types, the better.
2) Attributes for the player.
– Flags to show controls, autoload, autoplay, etc.
– Width & height.
3) Fallbacks.
– Some text noting that HTML5 media isn't working.
– Flash player.
4) JavaScript to control the player.
5) CSS to skin the player.
Slide 25
Slide 25 text
Video
Your browser doesn't support HTML5 video.
var v = document.getElementById("movie");
v.onclick = function() {
if (v.paused) { v.play(); } else { v.pause(); }
};
Slide 26
Slide 26 text
Audio
Your browser does not support the audio element.
Slide 27
Slide 27 text
Luckily
Unless you're developing a plugin,
there's hardly any reason to do it
yourself with WordPress!
Slide 28
Slide 28 text
No content
Slide 29
Slide 29 text
Wordpress 3.6
●
New shortcodes [audio] and [video] using the
MediaElement.js library.
●
Uses consistent HTML markup, so it's super
easy to use CSS to skin the players.
●
Can swap out default MediaElement.js support
via 'wp_video_shortcode_library' filter.
●
Easy insertion via new post formats UI.
●
Additional metadata extraction via getID3
library.
Slide 30
Slide 30 text
Video Examples
●
Video
– [video src="video-source.mp4"]
– [video width="600" height="480" mp4="source.mp4"
ogv="source.ogv" webm="source.webm"]
– http://www.example.com/videos/video-source.mp4
Slide 31
Slide 31 text
Audio Examples
●
Audio
– [audio src="audio-source.mp3"]
– [audio mp3="source.mp3" ogg="source.ogg"
wav="source.wav"]
– http://my.mp3s.com/cool/songs/coolest.mp3
Slide 32
Slide 32 text
Wordpress <= 3.5.1
●
No native HTML5 media support without
plugins.
●
Fortunately there are a handful of good plugins
out there that will fill the gap until 3.6.
●
Or, you can roll your own support via .js libraries
and some plugin hacking.
Slide 33
Slide 33 text
MediaElement.js
●
Video *and* audio support.
●
Consistent HTML5 *and* Flash fallback player.
●
Backfills support for IE6-8 and adds extra media
types for Firefox, Opera, & Safari.
●
This is what is integrated into WordPress 3.6!
●
Unfortunately, the 3.5.1 plugin is garbage :(
http://mediaelementjs.com/
Slide 34
Slide 34 text
JW Player 6
●
Video *and* audio support.
– Flash fallback.
●
Free for non-commercial use, but costs money to
remove watermark & unlock extra features.
●
Cloud hosting and configuration.
●
Tailored toward “professional” users.
– Analytics
– Advertisement
http://www.longtailvideo.com/jw-player/
Slide 35
Slide 35 text
Video.js
●
Video support only.
●
From the folks at Britecove & Zencoder.
●
Option to load script from cloud or locally.
●
Built-in responsive design & retina support.
●
Used by lots of big-name Web brands.
http://www.videojs.com/
Slide 36
Slide 36 text
Jetpack
●
Audio only via [audio] shortcode.
●
Flash first, HTML5 fallback or for non-mp3 files.
●
Basic styling via shortcode parameters.
●
Simple, easy way to support iOS & other
HTML5 ready devices.
●
A bunch of other sweet features too.
http://jetpack.me/
Slide 37
Slide 37 text
In conclusion
●
HTML5 media requires
lots of redundancy.
●
Flash will probably be
around for a while.
●
Update to 3.6 ASAP.
●
In the mean time video.js
and Jetpack are good
solutions for video and
audio, respectively.
Slide 38
Slide 38 text
Recommended reading
●
Dive into HTML5
http://diveintohtml5.info/
●
HTML5 for Web Designers
http://www.abookapart.com/products/html5-for-web-designers
●
HTML5 Doctor
http://html5doctor.com/
●
HTML5 Rocks
http://www.html5rocks.com/
●
Audio / Video support in Core
http://make.wordpress.org/core/2013/04/08/
audio-video-support-in-core/
Slide 39
Slide 39 text
Questions?
Slide 40
Slide 40 text
Thanks for listening!
Check out my slides at:
https://speakerdeck.com
/dbspringer/