Tag Archives: media

WordPress 3.9 + Audio/Video

Posted on by

Screen Shot 2014-04-16 at 2.54.12 PM

Previous posts on Make/Core:
Audio / Video 2.0 Update – Media Modal 
Audio / Video 2.0 Update – Playlists 
Audio / Video 2.0 Update 
Audio / Video 2.0 – codename “Disco Fries”

If you remember WordPress 3.6, we were scrambling to make Post Formats work. They did not, so they were dropped. What remained in the aftermath was rudimentary support for audio and video. You could display one audio file at a time and/or one video file at a time using a shortcode. Good, but not good enough. WordPress 3.9 has a TON of improvements, several related to visual editing, media, and a second pass at defining what audio and video can do in WordPress.

HTML5 audio and video on the web are still the Wild Wild West, I viewed 3.9 as a way to help tame the beast.

Media code from 3.5

Koop wrote an astonishing amount of beautiful Backbone-driven code in WordPress 3.5 related to overhauling and rethinking Media in WordPress. Gregory Cornelius, Andrew Ozz, and I spent the better part of 3.9 swimming around it and its relationship to TinyMCE. While there isn’t a ton of written documentation for media, I did fall on the sword and added JSDoc blocks to every class in media-views, media-model, and media-editor JS files. It is now possible to follow the chain of inheritance for every class, which is 7 levels deep at times. We’ve also built some new features, and learned how to interact with these existing APIs.

TinyMCE Views – Visual previews of your media

Screen Shot 2014-04-16 at 2.26.34 PM TinyMCE is the visual editor in WordPress. Behind the scenes, the visual editor is an iframe that contains markup. In 3.9, gcorne and azaozz did the mind-bending work of making it easier to render “MCE views” – or content that had connection to the outside world of the visual iframe via a TinyMCE plugin and mce-view.js. A lot of the work I did in building previews for audio and video inside of the editor was implementing the features and APIs they created. gcorne showed us the possibilities by making galleries appear in the visual editor. Everything else followed his lead. Screen Shot 2014-04-16 at 2.26.00 PM

Themes now have proper CSS

We went back in time to the last 5 default themes and added the basic styles necessary for audio and video to behave in a unified way. Meaning, if you switch from TwentyEleven theme to TwentyFourteen: videos should always have the same aspect ratio. Same goes for the admin, the video should always appear with dimensions that are predictable.

<audio> and <video> are now responsive

Because of the above CSS changes, audio and video are responsive throughout WordPress and on mobile. Win.

Attachment Pages

If I asked you the question – do players automatically appear for audio and video files on their respective attachment pages? You might answer, of course they do! … they did not, they do now!

Screen Shot 2014-04-16 at 2.29.58 PM

Chromeless YouTube

MediaElement supports the playback of YouTube videos without the look and feel of a YouTube player. This is great because the style of the video player will match the style of your other players.

Screen Shot 2014-04-16 at 2.33.27 PM

MediaElement updated

MediaElement.js has been updated to the latest and greatest version. HUGE thanks to John Dyer for working so closely with us and accepting pull requests when we badger him on random Saturday afternoons.

Playlists

Turning mp3 URLs into players is awesome and happens automagically in WordPress now. But what if you are sharing an entire album of your band’s tunes, or sharing your music recital on your website? Rendering 10 separate players is visually weird. We already have “galleries” for images, can we reuse the admin UI for those and make it work for playlists of audio or video files? We can (after some sweat and tears), so we did. I remember staying up all night in 2006 trying to figure out how to put my band’s music on our website. If even a niche user base of musicians are able to publish their music because of this feature, it will have been worth it.

Screen Shot 2014-04-16 at 2.38.22 PM

Manage Shortcodes

Your audio and video shortcodes now have live previews in the editor, but that’s not it… you can now click the preview to pop open the media modal and edit your content. Once there you can:

  • Add alternate playback formats for maximum native HTML5 playback
  • Add a poster image for your video, if it wasn’t done automatically on upload
  • Add subtitles to your video

Screen Shot 2014-04-16 at 2.42.56 PM

It’s pretty slick.

Screen Shot 2014-04-16 at 2.43.25 PM

Core Changes

Some other cool little treats:

  • Featured Image is turned on for attachment:audio and attachment:video = when you upload your audio and video files, if the files contain cover images, they are automatically slurped for you, uploaded, and associated as the featured image for the media file. Meaning: you will automatically have a video poster image, or your audio playlist will display the album cover along with the track.
  • Images in ID3 tags are stored via hash to prevent re-uploading = if you upload 10 tracks from an album that all have the same album cover, only one cover will uploaded and associated with all of the tracks.
  • Artist and Album are editable = your media item’s title is always used as the “song title,” but now, if your item did not contain metadata for artist and album, you can set it on the Edit Media screen.
  • The old “crystal” icon set for media items has been updated and MP6ified. They look WAY better.

Have fun with WordPress 3.9 🙂

xoxo

Audio Redux + Updated Plugins

Posted on by

I had the pleasure recently of realizing that some of my plugins had disappeared from the WordPress dot org plugins repo because I haven’t updated them in 1.5ish years. Last year at WordCamp San Francisco, I used part of my talk to explain why plugins aren’t always awesome, and me not updating my own plugins is a great example of why. You might think to yourself, “Scott’s pretty good, I’m sure his plugins are awesome, I could probably get pregnant just by activating one of them!” To which I would reply: “If you are using my Movies plugin, I have absolutely no idea if it still works, and I’m sure every javascript library in it is 50-75 versions behind.”

So I am trying to right this wrong and update my code. Back in 2010, I was still under the impression that procedural programming was da bomb. Needless to say, the plugins should work a lot better now and will be maintained / are more maintainable.

Here are some of the plugins that are updated, along with their companion blog posts:

Minify
Plugin: http://wordpress.org/extend/plugins/minify/
Blog Post: http://scotty-t.com/2012/05/24/minify-redux/

Shuffle
Plugin: http://wordpress.org/extend/plugins/shuffle/
Blog Post: http://scotty-t.com/2010/11/15/my-first-plugin-shuffle/

Audio
Plugin: http://wordpress.org/extend/plugins/audio/
Blog Post: http://scotty-t.com/2010/11/22/new-plugin-audio/

Audio is awesome, and here’s why:

  • WordPress doesn’t come packaged with an mp3 player
  • Your player can be styled 100% with CSS – (drop in a replacement: STYLESHEETPATH . ‘/audio.css’)
  • If you use Shuffle, you can attach .ogg files to your .mp3s, and they will be used in native HTML5 browsers that don’t natively support .mp3
  • If you use your own styles, you can style a playlist automatically, and with Shuffle, attach image(s) to each MP3

BOOM. I will try to be a better man in the future and keep my plugins bleeding edge.

xoxo

“Movies” plugin now supports WebM

Posted on by

I just checked in version 0.3 of “Movies,” my HTML5 Video plugin for WordPress. When used with Shuffle, you can now associate an Ogg Theora file, a WebM file, and an image with an MP4 (H.264) file to load into an HTML5 Video player (built on top of VideoJS) that will play native Video in browsers that support it (most of them that aren’t IE, and IE9) and use the MP4 and Flash for browsers that don’t (old versions of good browsers and all versions of IE, minus IE9).

I spent half of the day trying to install ffmpeg on the command line to encode videos into WebM, but I failed miserably/then realized you can encode WebM files with Firefogg, the same tool that is used to encode Ogg Theora files: just select “vp8” instead of “theora” in the video codec dropdown. Easy!

Go here to see what’s supported where: http://diveintohtml5.org/video.html#what-works

My previous post on Movies: http://scotty-t.com/2010/11/24/new-plugin-movies/

“Audio” plugin now supports Ogg Vorbis

Posted on by

http://wordpress.org/extend/plugins/audio/

I just checked in version 0.2 of my HTML5 Audio plugin for WordPress, “Audio.” When used with Shuffle, you can now associate an Ogg Vorbis file and/or image with an MP3 file which will all load automatically and simply into an HTML5 Audio player on browsers that support it with a fallback to Flash for those browsers that don’t.

Support for Ogg is crucial because Firefox will not play MP3s natively. Unless you view the source of your code or are the developer of your site, none of this information should matter to you – you can continue to use MP3s, and the code will load HTML5 Audio/Flash behind the scenes. For those who want to take advantage of the latest/greatest and shun Flash whenever possible, use Ogg and MP3.

More on “Audio” here.

New Plugin, “Movies”

Posted on by

UPDATE: Movies now supports WebM

Full disclosure: I know there are other HTML5 video players available as WordPress Plugins. I also know Daryl Koopersmith just wrote a plugin for VideoJS cuz he told me on Twitter. However, his plugin (and none of the others) take advantage of the glory that is Shuffle.

For HTML5 video to work, you need 2 (maybe 3) things:

  • an H.264-encoded video file
  • an Ogg Theora-encoded video file
  • a still image to use as a “poster” image for the video when it loads into the player

VideoJS kicks ass because once you have these resources, it is easy to use their boilerplate markup to insert a video tag and a fallback Flash object. What makes it awesome even further is that the player can be styled 100% with CSS/images, even 100% CSS3 if you want! That’s why I fell in love with VideoJS immediately.

What is not so easy is managing all of these file types in the Media Library. That’s why I wrote Shuffle. Shuffle lets you associate anything with anything, even allows you to re-order using drag and drop (high-fiving myself!). So if you are gonna use Movies, you are gonna want to use Shuffle!

Shuffle allows you to search for Attachments when attaching a media item to a post. When you import your movies, please fill out Title-Caption -Description for Title-Artist/Director/Whatever-Description. Always filling out a title will help you in 2 ways:

  • the items will be easier to search for
  • the information is displayed on the page, or hidden but still crawlable, in the hMedia microformat

I decided that if I was going to make swiss-army-knife media plugins, I would try to do everything as semantic and clean as possible.

But back to how it works… once you upload your MP4 file, OGV file, and image, you want to attach the OGV and image to the MP4 file (you need Shuffle for this). From then on, you can attach and detach the MP4 file from whatever Post or Page you want, and the OGV and image will always remain attached to the MP4, unless you detach them manually. When the plugin loads your MP4s to the page, it looks for its attachments to fill out the and poster data in the HTML5 video tag, also uses the image for the Flash fallback, and uses the MP4 data and the image source for the hMedia data.

To use Movies in your theme, you have 2 options:

  • As a shortcode: [movies]
  • As a function: the_movies() or the_videos()

If you need info on how to encode your videos in H.264 or OGV, go here. The markup for the VideoJS player is loaded automatically, as is the JavaScript to dynamically load the videos when clicked from within the list of videos attached to your post. To style the player and the way the playlist looks, add a video.css file to your Theme directory. It will load with the rest of the plugin files and will override where necessary.

http://wordpress.org/extend/plugins/movies/

New Plugin, “Audio”

Posted on by

UPDATE: Audio now supports Ogg Vorbis

That being said, it is off to a good start. In my quest to 1) encapsulate all the code I end up writing 5 million times into re-usable / one-click-installable Plugins and 2) fix how WordPress deals with/doesn’t deal with Media, I have written a pretty sweet plugin for Audio. It is not feature-complete and definitely needs to come with some more Theme options out of the box, but for advanced developers who want to start managing their MP3s / MP3 playlists in a much easier way immediately, it is already pretty powerful.

I claimed the Subversion repository late last week without having written a line of code, but I did have a mission statement which I included in the Plugin’s description:

Audio allows you to use simple functions in your theme to display audio you have attached to Posts/Pages/Custom Post Types in your Media Library. Your player is styled 100% with CSS/images (if you want). Your audio player uses your browser’s native HTML5 capabilities when available with a fallback to Flash when necessary. Allows you to play audio inline on mobile browsers that support HTML5 Audio (heeeey, WebKit!)

Let’s take it step-by-step:

1) You can now output an Audio playlist into your page through 2 EASY methods

  • Shortcode in the editor =
  • the_audio() in your Theme code

These both do the same thing: they create the code necessary for jPlayer to handle player clicks and for you to style your player. The optional take an argument of “layout” if you want to include the list of your tracks below the player:

  • Shortcode in the editor = [audio layout="list"
  • the_audio('list') in your Theme code

In plugins/audio/audio.php, you can configure your URLs to be open to the world or obfuscated, the default is obfuscated. To change this, set this at the top of the file:

define('SECURE', false);

2) The player is styled 100% with CSS and some images I boot-legged from jQuery UI. I HIGHLY-ADVISE you to override all of the styles I have provided. In fact, if you put an audio.css file in your Theme directory, it won’t even load mine! You should copy and paste the code from plugins/audio/css/audio.css and then change it to your own site’s vibe.

3) HTML5 Audio!

The plugin is built on top of jPlayer, a jQuery audio plugin. In Chrome and Safari, your MP3s will play as native HTML5 Audio. Same goes for Android and iPhone. All other browsers that don’t support MP3 natively will fallback to Flash. Firefox supports Ogg Vorbis, but I didn’t have the energy to write support for Ogg Vorbis into the plugin yet. I am trying to de-couple all of the default functionality of Audio from Shuffle, but you should probably use them in tandem to get the benefits of associating thumbnails (album covers) with audio uploads, and later, Ogg Vorbis uploads with MP3s (I still haven’t decided how I’m going to do this).

The description for the plugin now reads:

HTML5 Audio (on supported browsers), Flash fallback, CSS-skin’d player, hAudio Micro-formats, attach images to MP3s (when used with Shuffle)

4) I have decided to get super-semantic and use the hAudio micro-format for the audio data that the plugin outputs. When adding meta data to your MP3s in the Media Library, Title – Caption – Description will be used for Song – Artist – Album.

http://wordpress.org/extend/plugins/audio/

New Plugin, “Tumble”

Posted on by

I launched Shuffle 2 days ago, and it is has already been downloaded over 200 times. Drunk with this knowledge, I cranked out a 2nd plugin: “Tumble.”

Tumble is an API helper for, you guessed it, Tumblr. What does that mean? Well, your WordPress Media Library and Post history are great resources. They are content repositories waiting to be unleashed unto the world. By default, you share them using your WordPress blog/website, but why not use the same content on other services when appropriate?

Let’s say you want to start a Tumblr but you don’t want to take the time to fill it up with new posts. Maybe you want your website to have galleries of images, but there’s one photo in particular that you think would be great as a Tumblr “Photo” post. Tumblr might be a niche audience that likes your content, but only in bite-sized pieces. This is where Tumble comes in.

Tumble inserts it self in your Post history as a one-click action, right alongside “Edit,” “Quick Edit,” and the like. Click “Post to Tumblr” for a post in your list of Posts, and voila! you have added a new post to your Tumblog.

In your Media Library, I have added a column that inserts Tumblr Post links for each item. Click the link for an item, and the plugin is smart enough to know what time of content you are dealing with and will format the API call to Tumblr appropriately. Currently this works for Photos, Audio, and Video. There is a 10MB limit for photos/audio and a 50MB limit for video. The plugin will tell you right away if the item is too big to transfer.

I like the idea that your Media Library is just a content repository, so why not use it to share to other destinations on the web. Just another reason that WordPress is the Swiss Army knife of development frameworks!

http://wordpress.org/extend/plugins/tumble/

My First Plugin: “Shuffle”

Posted on by

I have been developing with WordPress for over a year now. It is hard to describe how much it has positively affected my development workflow. It’s easy to install, has easy-to-use APIs and great documentation, and its CMS capabilities are amazing. On top of that, it has a peer-less Plugin architecture which allows anyone to get under the hood and add functionality on top of WordPress core. The WordPress Plugin community is so vast and talented that when functionality is missing from WordPress itself, you are usually only one plugin away from tackling any problem you have.

  • I don’t want to write code that smushes my images, don’t need to: WP-Smush.it did it for me!
  • I don’t want to write a caching mechanism for my site, don’t need to: W3 Total Cache did it for me!
  • How do I write a sitemap and get myself up in the Google? No clue, so I’ll use Google XML Sitemaps!
  • I want to jam a social network into my website, oh heeeeyyyyyy BuddyPress!

But in the midst of this, I started building sites that have a lot of Images, Image Galleries, Video, Audio, Video Playlists, Audio Playlists, HTML5 video players, etc. WordPress is great at doing a few things with media:

1. Uploading multiple files at once
2. Hooks into the Upload actions (WP-Smush.it FTW!)
3. Attaching items to a post
4. Retrieving an item’s attachments (sorta)
5. Navigating through the Media Library… um, not really

Well, here’s what I NEEDED to do:

1. Detach images from a Post without DELETING THEM
2. Re-order my attachments by post (changing the order of a Playlist, etc)
3. Ordering my attachments by something other than date uploaded or title
4. Attach images to a video (another attachment) to use as a preview thumbnail
5. Attach album covers to audio files
6. Re-order a photo gallery at will
7. Do all of the above in an EASY way

WordPress doesn’t do any of this (if it does, it is hidden functionality that I don’t know about). So I decided to do something I, personally, have never done: I wrote a WordPress Plugin. Shuffle is the name of that plugin. Shuffle allows you to do a lot of thing with your Media that are not default WordPress behavior/functionality.

In the way that “tags” and “categories” are really just “taxonomies,” an “image” or a “video” is really just a Post type. Attachments live in the wp_posts table just like Posts, Pages, Custom Post Types, and other types of Attachments.

The wp_posts table has a bunch of fields. However, when it comes to attachments, there are 2 that we are really interested in: post_parent and menu_order. The act of attaching an image is really just setting the post_parent on the image to whatever number corresponds to the attaching Post type’s ID. If you attach 30 images to a post called “Hello World!” and Hello World’s ID in the database is 187, all 30 of those images will have post_parent set to 187. So if you want to “detach” the image, all you really need to do is set its post_parent to 0 (zero). Seems easy enough? Yet this is not an option in the Media Library.

If you create a Page and then create child Pages of that same Page, you will notice an attribute you can set by hand in the Edit panel: “order.” This corresponds to the menu_order field in the wp_posts table of the database. When you upload Attachments, menu_order is set to a default of 0 (zero) with no option to even change it by hand. Even if you could change it by hand, doing so for 50 images would be very very tedious. Wouldn’t it be great if you could see all 50 of those images for the attaching post and then re-order the images using a cool Drag and Drop UI that will set menu_order for you? You would think something that does at least half of this would be in WordPress by default, it is not.

I just uploaded a Video and want to feature it on a Page. I am going to use a slick new HTML5 Video Player and my Player wants me to specify a preview image / a “poster” image. I don’t necessarily have to do this, but I’d like to select the still show that shows on the screen before the user plays the video. I also want to set a thumbnail for the video so I can show a bunch of videos in a list or set up a cool HTML5 Video playlist. So how do I attach an Image to a Video in WordPress? You can’t.

This is where Shuffle comes in. Shuffle can do all of these things. Attach anything to anything. Detach without losing your files. Order your attachments by dragging and dropping like other services allow you to do. In your item’s list of Attachments, click on an item to see its Attachments! On so on and so on. Anyways, you need Shuffle! See it in action by downloading here:

http://wordpress.org/extend/plugins/shuffle/