WordPress Media Essentials

WordPress San Diego meetup presentation about the built-in WordPress media options, plugin-solutions, as well as a few distribution things like CDNs.

Transcript

1. WordPress San Diego (North County) WordPress Media Essentials Slides at: https://speakerdeck.com/dbspringer
2. Who is this guy? Derek Springer Code Wrangler, Automattic (R)Ads Team BeerXML Shortcode Plugin @derekspringer Used to build satellite plugins, now I build WordPress plugins
3. Overview 1) Why use media in WordPress? 2) A quick note on HTML5 3) Images 4) Audio 5) Video 6) Embeds 7) CDNs 8) Stuff to check out
4. This isn't a talk about • Using the WP media uploader – Though I am going to discuss some of the cool new features of WP 3.9. • The finer points of implementing some of the topics I discuss. • Developer level code tweaks.
5. Two sides to this coin 1) Presenting the media. 2) Hosting the media.
6. Questions! `
7. How many folks have consumed online media in the last week?
8. How many folks have consumed media on a WordPress site in the last week?
9. How many folks have media on their site?
10. How many folks have an idea what media options are available for WordPress?
11. Does anyone have any thoughts on why you would want to use media on your site?
12. Why use media in WP? • Adding images, video, and audio stimulates your users’ minds, giving them something more than text to dig through, and a reason to come back. • Media breaks up the text, improves the flow, and makes a long post seem much shorter and more enjoyable to read. • Maybe that is the whole point of your site! (*cough* membership sites *cough*)
13. What is media in WP? • “An agency by which something is accomplished, conveyed, or transferred.” • In WP this includes any rich way of displaying information in your posts. • Text • Images • Audio • Video • Tweets • Calendars • Polls
14. ` A quick note on HTML5
15. 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
16. 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.”
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 browser don't support even the *most* popular formats. (Even Chrome and Chromium aren't equal). – More formats means 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 out of the box you're out of luck. • After all is said and done you might *still* have to use Flash.
21. Browser Support
22. Support v Time
23. 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.
24. Sane compatibility • Video – WebM + H.264 • Audio – MP3 + Vorbis • Free – WebM, Theora, Vorbis
25. Thankfully Unless you're developing a plugin, there's hardly any reason to do it yourself with WordPress!
26. 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.
27. 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! http://mediaelementjs.com/
28. Images
29. Image carousels/sliders See: http://shouldiuseacarousel.com/
31. Images in WP 3.9 • Drop directly into the editor, no need to open media manager. • Resize the image in the editor. • See galleries live in the editor. • Support for imgur images and galleries.
32. Optimize your images • Most folks don't realize they're serving images that are *way* bigger than they need to be. • Furthermore, you're serving lots of images at the bottom of posts that might not even been seen by your users. • That's a lot of bandwidth to waste! • Also slow!
33. Hammy http://wordpress.org/plugins/hammy/
34. EWWW Image Optimizer http://wordpress.org/plugins/ewww-image-optimizer/
35. Lazy Loader http://wordpress.org/plugins/lazy-load/
36. Audio
37. Built-in audio • Audio – [audio src="audio-source.mp3"] – [audio mp3="source.mp3" ogg="source.ogg" wav="source.wav"] – http://my.mp3s.com/cool/songs/coolest.mp3
38. Audio playlist – 3.9
39. Audio details
40. Other recommendations Just embed!
41. Video
42. Built-in video • 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
43. Video playlist – 3.9
44. 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/
45. Other recommendations Just embed!
46. Embeds • Super-easy to embed videos, images, audio, and other content into your WordPress site. • Just paste a supported URL is on its own line. • Optionally wrap URL in the [embed] shortcode. – It also allows you to set a maximum (but not fixed) width and height, like so [embed width="123" height="456"]...[/embed] • For security purposes, WP only embeds URLs matching an internal whitelist.
47. Supported embeds • blip.tv • Bunkr • DailyMotion • Flickr • FunnyOrDie • Hulu • Imgur • Instagram • Meetup.com • SmugMug • SoundCloud • Spotify • Revision3 • Scribd • SlideShare • Photobucket • PollDaddy • Rdio • YouTube • WordPress.tv • VideoPress • Twitter • Viddler • Vimeo
48. oEmbed discovery • To prevent accidental embedding from malicious websites oEmbed discovery is disabled by default. • You can get around this though! – Install Enable oEmbed Discovery plugin. – Gives unfiltered_html users (Administrators and Editors) the ability to embed from websites that have oEmbed discovery tags in their <head>. • Caveat administrator.
49. CDNs • “Content Delivery Network” • Images / Audio / Video are the heavyweights of bandwidth for your site. • Far away user → super slow downloads! • Let a pro host your files and distribute them across the world for snappy downloads.
50. Photon - Jetpack • Service for Jetpack-connected WP sites. • Acts on images in posts, pages, and featured images (post thumbnails). To start using Photon: • From the Jetpack page in your blog dashboard, click 'Activate' button for Photon. • You’re done! http://jetpack.me/support/photon/
51. 1-2 punch • Step 1: Install W3 Total Cache • Step 2: Sign up with your favorite CDN. – MaxCDN – EdgeCast – Amazon Cloudfront • If media is a big portion of your site this is not something you should skimp on! (It's okay to pay for important things)
52. Also! • Use Google's CDN to host your common javascript files to save even more bandwidth. • Check out: Use Google Libraries
53. Recommended reading • Audio & Video Support in Core • Editor/Audio/Video updates in 3.9 • WordPress Embeds • Jetpack (Gallery, Photon, & VideoPress) • Devin Walker's slides on site optimization • Yoast's Opinion on Sliders • Source and Attribute Creative Commons
54. In conclusion • Update to 3.9 ASAP. – Check out the new image, audio, and video features. • Don't be afraid to host your files elsewhere and embed. • Don't let bandwidth run wild, invest in a good CDN!
55. Questions?
56. Thanks for listening! Check out my slides at: https://speakerdeck.com /dbspringer/