3:10 to YouTube - WCOC13

People are bonkers about the idea of native HTML5 media integration, but let’s face it: HTML5 is still the Wild West. I’m going to cover the current state of HTML5 media (audio/video), best practices, and ways to integrate it into your WordPress site.

Transcript

2. Who is this guy? Derek Springer Code Wrangler, Automattic @derekspringer Used to build satellite plugins, now I build WordPress plugins
3. 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
4. Two sides to This coin 1) Playing the media. 2) Hosting the media.
5. Questions! `
6. How many folks have consumed online media in the last week?
7. How many folks have consumed HTML5 media in the last week?
8. How many folks have use HTML5 media on their site?
9. How many folks have an idea what HTML5 media elements exist?
10. Does anyone have any thoughts on why you would want to support HTML5 media on your site?
11. Why use HTML5 media? • You want to support iOS/Apple & other mobile products. • You hate Flash. • <embed> and <object> tags are a mess. • Looking to use cutting edge web tech. • Board meeting bullet point. • You want to be a “cool kid.”
12. `
13. HTML5: The Wild west Here's what we have now: • <Video> element – H.264* (mp4) – Theoria (ogg) – VP8 (WebM) • <Audio> element – MPEG-1 Audio Layer 3* (mp3) – Advance Audio Coding* (aac) – Vorbis (ogg) Note: none are *required* to be supported in HTML5! Flash *licensed
14. Browser Support
15. Compatibility
17. 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.
18. 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.
19. 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.
21. 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 <video> element, and fall back to a Flash-based video player.
22. Sane compatibility • Video – WebM + H.264 • Audio – MP3 + Vorbis • Free – WebM, Theora, Vorbis
23. Draw! (Using HTML5)
24. 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.
25. Video <video id=”movie” preload controls> <track kind="captions" src="foo.en.vtt" srclang="en" label="English"> <source src="somevideo.webm" type="video/webm"> <source src="somevideo.mp4" type="video/mp4"> Your browser doesn't support HTML5 video. <!-- You can embed a Flash player here as fallback --> </video> <script> var v = document.getElementById("movie"); v.onclick = function() { if (v.paused) { v.play(); } else { v.pause(); } }; </script>
26. Audio <audio id=”player” preload=metadata controls> <source src="somesong.mp3" type="audio/mp3"> <source src="somesong.ogg" type="audio/ogg"> <!-- Flash fallback below --> <object type='application/x-shockwave-flash' data='player.swf' width='200' height='24'> <param name='song' value='somesong.mp3' /> <param name='quality' value='high' /> <param name='menu' value='false' /> <param name='wmode' value='opaque' /> Your browser does not support the audio element. </object> </audio>
27. Luckily Unless you're developing a plugin, there's hardly any reason to do it yourself with WordPress!
29. 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.
30. 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
31. 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
32. 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.
33. 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/
34. 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/
35. 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/
36. 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/
37. 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.
38. 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/
39. Questions?
40. Thanks for listening! Check out my slides at: https://speakerdeck.com /dbspringer/