WordPress Media Essentials

Slide 1

Slide 1 text

WordPress San Diego (North County) WordPress Media Essentials Slides at: https://speakerdeck.com/dbspringer

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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.

Slide 5

Slide 5 text

Two sides to this coin 1) Presenting the media. 2) Hosting the media.

Slide 6

Slide 6 text

Questions! `

Slide 7

Slide 7 text

How many folks have consumed online media in the last week?

Slide 8

Slide 8 text

How many folks have consumed media on a WordPress site in the last week?

Slide 9

Slide 9 text

How many folks have media on their site?

Slide 10

Slide 10 text

How many folks have an idea what media options are available for WordPress?

Slide 11

Slide 11 text

Does anyone have any thoughts on why you would want to use media on your site?

Slide 12

Slide 12 text

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*)

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

` A quick note on HTML5

Slide 15

Slide 15 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 16

Slide 16 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 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 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.

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 out of the box 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

Browser Support

Slide 22

Slide 22 text

Support v Time

Slide 23

Slide 23 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 24

Slide 24 text

Sane compatibility ● Video – WebM + H.264 ● Audio – MP3 + Vorbis ● Free – WebM, Theora, Vorbis

Slide 25

Slide 25 text

Thankfully Unless you're developing a plugin, there's hardly any reason to do it yourself with WordPress!

Slide 26

Slide 26 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 27

Slide 27 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! http://mediaelementjs.com/

Slide 28

Slide 28 text

Images

Slide 29

Slide 29 text

Image carousels/sliders See: http://shouldiuseacarousel.com/

Slide 30

Slide 30 text

No content

Slide 31

Slide 31 text

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.

Slide 32

Slide 32 text

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!

Slide 33

Slide 33 text

Hammy http://wordpress.org/plugins/hammy/

Slide 34

Slide 34 text

EWWW Image Optimizer http://wordpress.org/plugins/ewww-image-optimizer/

Slide 35

Slide 35 text

Lazy Loader http://wordpress.org/plugins/lazy-load/

Slide 36

Slide 36 text

Audio

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

Audio playlist – 3.9

Slide 39

Slide 39 text

Audio details

Slide 40

Slide 40 text

Other recommendations Just embed!

Slide 41

Slide 41 text

Video

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

Video playlist – 3.9

Slide 44

Slide 44 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 45

Slide 45 text

Other recommendations Just embed!

Slide 46

Slide 46 text

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.

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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 . ● Caveat administrator.

Slide 49

Slide 49 text

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.

Slide 50

Slide 50 text

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/

Slide 51

Slide 51 text

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)

Slide 52

Slide 52 text

Also! ● Use Google's CDN to host your common javascript files to save even more bandwidth. ● Check out: Use Google Libraries

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

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!

Slide 55

Slide 55 text

Questions?

Slide 56

Slide 56 text

Thanks for listening! Check out my slides at: https://speakerdeck.com /dbspringer/