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


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) {; } 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"] –

Slide 31

Slide 31 text

Audio Examples ● Audio – [audio src="audio-source.mp3"] – [audio mp3="source.mp3" ogg="source.ogg" wav="source.wav"] –

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 :(

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

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.

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.

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 ● HTML5 for Web Designers ● HTML5 Doctor ● HTML5 Rocks ● Audio / Video support in Core audio-video-support-in-core/

Slide 39

Slide 39 text


Slide 40

Slide 40 text

Thanks for listening! Check out my slides at: /dbspringer/