WordPress: Playlist shortcode with external audio or video files

The [playlist] shortcode  in WordPress 3.9 is great, but we can’t use it for external files.

Here’s a solution I wrote on WPSE to use it for external files.

The plugin is hosted on GitHub.

Here’s version 0.05b for those who use PHP 5.1.x or PHP 5.2.x.

WordPress 4.0 support:

Please update to version 0.0.5+ of the plugin due to some small playlist changes in WordPress 4.0. Thanks.

Version 0.0.6, now supports with autoplay and the GitHub Updater support. It works on WordPress 4.0+.

Version 0.0.7 introduced the new shortcodes _playlist and _track and the support for the shortcodes wpse_playlist and wpse_trac will phase out.

The current version is 0.0.9.

Example 1a

This audio playlist:

is generated by the following shortcode:

[_playlist type="audio" tracklist="true" tracknumbers="true" images="true" artist="true"]
[_track title="Ain't Misbehavin'" src="//s.w.org/images/core/3.9/AintMisbehavin.mp3" type="audio/mpeg" caption="" description="" image="" meta_artist="Louis Armstrong and His Orchestra" meta_album="78 RPMs and Cylinder Recordings" meta_genre="" meta_length_formatted="3:21" image_src="//s.w.org/images/core/3.9/louis.jpg" image_width="308" image_height="240" thumb_src="//s.w.org/images/core/3.9/louis.jpg" thumb_width="308" thumb_height="240"]
[_track title="Buddy Bolden's Blues" src="//s.w.org/images/core/3.9/JellyRollMorton-BuddyBoldensBlues.mp3" type="audio/mpeg" caption="" description="" image="" meta_artist="Jelly Roll Morten" meta_album="78 RPMs and Cylinder Recordings" meta_genre="Jazz" meta_length_formatted="2:09"]
[/_playlist]

Example 1b

Here’s the playlist from example 1a, but with

tracknumbers="false" images="false"

Example 2

Here’s the vanilla version of the above audio playlist:

generated from the shortcode:

[_playlist type="audio" current="no" tracklist="yes" tracknumbers="no" images="no" artist="no"]
[_track title="Davenport Blues" src="//s.w.org/images/core/3.9/DavenportBlues.mp3"]
[_track title="Dixie Blues" src="//s.w.org/images/core/3.9/Louisiana_Five-Dixie_Blues-1919.mp3"]
[/_playlist]

Example 3

Here’s a video playlist:

from

[_playlist type="video"]
[_track caption="Live widgets previews in WordPress 3.9" src="//s.w.org/images/core/3.9/widgets.mp4" image_src="/projects/wp-content/uploads/2014/04/widgets_screen.gif"]
[/_playlist]

Here’s the native video playlist for comparison (without poster image):

from

[playlist type="video" ids="123"]

Happy watching/listening!

Changelog:

0.0.8 (2015-08-02)
– Fixed: Issue #7 by using true/false instead of 1/0 (Props: @X-PRESSIVE)

0.0.7 (2015-03-08)
– Added: New shortcodes [_playlist] and [_track].
– Deprecated: The support for the shortcodes [wpse_playlist] and [wpse_trac] will phase out.

0.0.6 (2015-03-07)
– Added: Support for the autoplay attribute.
– Added: Support for the GitHub Updater. (Probs: @BlaineMoore)
– Added: More info in the README.md file.
– Changed: Replaced filter_var() with wp_validate_boolean(), so we need WordPress 4.0+.
– Changed: Refactoring regarding late escaping.
– Fixed: Some minor adjustments.

0.0.5
– Fixed: added the missing script class to support WordPress 4.0 (Props: @ruLait)
 

Similar Posts

Adding a section to the Omnisearch in Jetpack with a custom posts search

Adding a section to the Omnisearch in Jetpack with a custom posts search

Let’s say we need to add an extra section to the Omnisearch in Jetpack with a custom posts search. Like shown in this screenshot: where I’ve moved the custom section to the top with: for better visibility. Instead of extending the: class, I prefer to extend the: class to simplify things, where we only need…

68 Comments

    1. Hi, this looks great. How would I go about providing a button for users to download the file as well? That would be excellent if this feature could be added. How could I do it?

      Reply

  3. This is an awesome way to get the wordpress media player working with external files, ideal for me as I want to use dropbox as CDN.

    One issue I found though, the shortcode works in the page when I paste it there but I can’t seen to use it in other customizable areas of my skin. I have text boxes in Thesis 2 which work with shortcodes but this shortcode doesn’t work. Any ideas?

    Reply

    1. Hi @David, thanks for your comment.

      I’m not sure why it isn’t working for you in some areas of your theme.

      – Is the playlist missing there?
      – Or do you just see the shortcode text?
      – Does the native playlist work there?
      – Any other errors?
      – Can you share the url, where one can see this problem?

      Reply

  4. Hey Birgir, great plugin! Really been trying to work with what wordpress has to offer natively. How hard would it be to get this to work with the native embed code?

    Reply

    1. Hi Dustin, thanks for your comment.

      Can you elaborate on your suggestion.

      Not sure what you mean by embed code, do you mean shortcode?

      Any ideas are welcome, on how we can improve the plugin 😉

      Reply

      1. Thanks for the reply. I do mean shortcode.

        It would be nice to take the way wordpress handles youtube or vimeo URLs and create a playlist there. Really what I am looking for is the ease of use. Something like that I think should go to the core.

        What do you think?

        Reply

        1. Hi @Dustin

          We need to fetch the media file metadata from somewhere. So the question is, where do we store it?

          I guess one way would be use some kind of virtual media files in the Media Library, where one could store the metadata (i.e. external link to the media file, title, artist, …) .

          Another way would be to use custom post types for this: one for playlists and another one for tracks.

          But adding the metadata directly in the shortcode seems to be a straightforward solution.

          Do you perhaps have another solutions in mind?

          Reply

          1. Sorry for the late reply, I don’t get notified of replies 🙁

            I think it would be ideal to keep it in the shortcode itself. That seems most intuitive to me.

            However coding wise, I don’t really know if that presents a challenge over doing it another way?

          2. We could override the native [playlist] shortcode with our own callback. It should be possible with:

            add_shortcode( ‘playlist’, array( $this, ‘playlist_shortcode’ ) );

            instead of

            add_shortcode( ‘wpse_playlist’, array( $this, ‘playlist_shortcode’ ) );

            So instead of [wpse_playlist] we could use [playlist].

            But we would have to make sure the playlist shortcode attributes works (like ids).

            Maybe it would be a good idea to prefix the new attributes, to avoid any conflict.

          3. Ya, you are probably right. Prefixing would be the more responsibile route.

            Is it possible to continue this conversation over email? I keep forgeting to check this thread. Just use the email I have used with these comments.

  5. Hi Birgir. Was so happy to find this plugin. Thanks for writing it!

    One problem for me. It’s working great on my site that uses the default 2014 WP Theme, but on a different site, I use the PageLines DMS theme, and the the play/pause button and also the volume icon are disappearing when the plugin is used with the DMS theme.

    Any suggestions? I’d love to be able to use it but have my users always seeing the play and volume features.

    Thanks again!

    Reply

    1. Hi @Amy, thanks for your comment.

      Do you have this issue for the native [playlist] shortcode as well?

      Do you have a link where we can see this problem in action?

      Reply

  6. Hey, Birgir…

    Seems like a great plugin, but I’m getting this error, and the plugin won’t activate:

    Parse error: syntax error, unexpected T_STRING in /home/adamover/public_html/wordpress/wp-content/plugins/wpse-playlist-master/wpse-playlist.php on line 11

    Any ideas?

    Reply

    1. Hello JR

      What’s your PHP version?

      It looks like the error is on the “namespace” part that’s not supported by your PHP version.

      From the plugin description:

      The plugin works on PHP 5.3+.

      The code on WPSE should be useable on older PHP versions (ps: you might also consider applying these changes to that code on WPSE)

      Reply

      1. On my phpMyAdmin, it says: “Version information: 4.1.8, latest stable version: 4.2.6. A newer version of phpMyAdmin is available and you should consider upgrading. The newest version is 4.2.6, released on 2014-07-17.”

        But you’re saying the plugin requires 5.3? Why wouldn’t that version be available to me?

        Reply

        1. Oops…my bad. I just realized that’s the phpMyAdmin version. I’m running PHP Version 5.2.17. How do I go about updating to 5.3.x? Do I have to contact my host for that?

          Reply

          1. This is usually in the hands of the hosting provider, if you’re on a shared server.

            PHP 5.2.17 was released 06 January 2011 (here’s a list of all the PHP releases), so this is not the latest version 😉

            But you can try the WPSE snippet as I explained earlier, it should support PHP 5.2.x.

            The code on WPSE should be useable on older PHP versions (ps: you might also consider applying these changes to that code on WPSE)

            Did you try it?

          2. I’m sorry, Birgir…I didn’t even see that snippet you sent. Many thanks, and I’m sorry to keep taking your time, but I don’t understand. The green parts are already in the class.playlist.php file. Should I be replacing them with what’s in red? I tried that, but I’m still not able to activate the plugin. I’m still getting the same unexpected T_STRING error from line 11 in wpse-playlist.php as mentioned in my first post.

          4. I wanted to thank you, Birgir, for your individualized help. I ended up having to abandon WPSE for this project, but I may use it in the future. I’ve kept the resources you’ve sent…Thank you! 🙂

  9. First i wanna to say thanks again for this great plugin, but i have one question, when using with a list of videos the last video when end just go to the first like a loop, is possible to make it stop when the last movie ends? i try to put loop=”false” on the last but not work

    Reply

  10. Is there a way to auto play stuff? I can’t figure it out. I’ve tried autoplay=on, autoplay=true, auto_play, with and without quotes.

    Reply

  12. Hey – great plugin!!
    But looks like the tracknumbers=”no” images=”no” commands are not supported any more…? :o(

    Reply

    1. Hi Nadja, thanks for your comment.

      Please check out Example 1a vs Example 1b here above.

      It seems to work there.

      How does your playlist code look like?

      Reply

  14. Great plugin! I’ve totally rated it with 5 stars!

    Now I have a question; It’s possible to play the tracks in the playlist randomly? Like shuffle=”true” random=”true” or something like that. It could be awesome! Thanks in advance, cheers.

    Reply

    1. @sysknot thanks.

      Random ordering is currently not supported, but it’s a good suggestion.

      I will try to look into it for the next release.

      Reply

      1. Thanks for the response; I feel to ask cause I couldn’t find anything about it in the docs nor the code, so yeah, it would be a nice feature.

        : ) Keep the good working!

        Reply

  15. How do I install this ? Which files do I upload to where (the plugins folder under wp-content?) and what folder if any do I put them in etc etc

    Apologies, I usually just search for plugins and one-click install them from within wordpress.

    Reply

    1. Hi Birgir –

      An almost instantaneous reply. Many thanks – I hadn’t found that link. I’ve been looking for this function for a long time so your plugin will come in most handy.

      Many thanks.

      Ed

      Reply

  17. Hi Birgir,

    I join all the others who are grateful with this plugin. One question: is it possible to play Youtube video tracks?

    This example doesn’t work:
    [_track caption="Some music" type="video/youtube" src="http://www.youtube.com/watch?v=byyCfAQaMLQ" ]

    Which could be the right setting?

    Cheers and thanks!

    Reply

    1. Hi Diplo and thanks for your comment.

      It would be cool to be able to use Youtube, but it must be a valid video file path (e.g. mp4).

      The Youtube paths like you suggested, are just webpages that consists of html + js + css

      But I like this idea, so we will see or maybe you have an idea how to support this?

      Best regards

      Reply

      1. Hi Birgir,

        Thanks to you again!

        There’s a plugin that has a nice interface for this purpose: http://www.wonderplugin.com and it accepts Youtube videos.

        The solution might be in wp-includes/media.php: there is the code to handle Youtube videos, something similar could be done by wp-includes/js/mediaelement/wp-playlist.js. The strange thing is that Mediaelements seems to be ready to handle audio/youtube and video/youtube types…

        In the meantime, your plugin Youlist has been very useful to enjoy dynamic playlists 🙂

        Kind regards and nice weekend!

        Reply

        1. Ps. Forgot to mention: apparently wonderplugin manages to find the path to Youtube with the type video/mp4, but I didn’t explore it much…

          Reply

  18. Hi. I’m completely new to WordPress. How do I install this plug in and get it to work. The only plugins i’m familiar with are those than can be installed through WordPress. Thanks.

    Reply

  19. When I tried adding two songs in playlist and it is working fine. When songs are increased the list is broken but rendered HTML is showing in source of page but while box in browser.
    Can you get back on this problem please.

    Reply

  20. Has anybody else had an issue with the video resizing when switching between items in the playlist? It seems to happen when I switch from a local video to a YouTube one.

    Reply

  21. Hi. I stumbled upon your plugin and it’s exactly what I’m looking for! Being able to customize the track source. The shortcode works in the post’s content area.

    But the shortcode doesn’t seem to work outside of it. Eg. when I use it in a template, and insert the shortcode in php using:

    echo do_shortcode(‘[_playlist]‘);

    Is there a way for it to work ouside of the_content ?

    Reply

    1. Okay. I figured it out. It had to do with the way you implement do_shortcode if there is an opening and closing. Which there is with [_playlist][/_playlist]

      The correct implementation is…
      echo do_shortcode(‘[_playlist type="audio"]‘ . ‘[_track src="url_1"]‘ . ‘[_track src="url_2"]‘ . ‘[/_playlist]‘);

      Hope that helps somebody save a lot of time.

      Reply

  22. I have installed and used it.
    This is a simple, practical, and very good audio-visual plug-in.
    Thank you for your great work.

    Reply

  24. Hi, thanks for the plugin. How to make it works with audio from google drive?
    I try “https://docs.google.com/uc?export=open&id=file_id”, but it doesn’t work. Thanks.

    Reply

      1. Thanks, it works. But it doesn’t work with the file that have size large than 100mb due to the large file notification from google drive.

        I try “https://www.googleapis.com/drive/v3/files/file_id/?key=api_key&alt=media” to bypass it, but it doesn’t work. Any suggestions?

        Reply

  25. This plugin came in like a boon but somehow doesn’t work for me. No idea what am I doing wrong. The plugin seems to work because from view source I see the generated HTML (pasted at https://codeshare.io/kmmPBp) but nothing shows up at https://www.podbharati.com/podcasts-sopaan/ (except a blank black block for the player). Even in the editor interface the short code shows up as is in visual editor. My PHP version is 5.6.40 and WordPress version is 5.7.2. Please help if possible.

    Reply

      1. Thanks, No JS error. Sorry I had removed that page mentioned in my comment, I created a test page at http://www.podbharati.com/test where everything works fine (the second block is for my podcast). But when I put it on my home page the upper box that has the Podcast details with the yellow thumbnail image vanishes, only the play list below shows. Anyways I settled for another plugin that will show this up based on the Podcast RSS feed and that will also save me the worry to update the page every time I publish a new podcast. This one sadly is too much effort.

        Reply

        1. Hi, it looks like there are some extra divs within the code (maybe from copy/paste?):

          Good to hear you found a solution that suits you.

          Reply

Leave a Reply to pggdt Cancel reply

Your email address will not be published. Required fields are marked *