Soukie's Place

keeping track of random thoughts

Degradable HTML5 audio and video Plugin

Screenshots of the plugin

Screenshots of HTML5 video and audio in action

Wordpress plugin for html 5 audio and video allows you to embed media for native playback in supported browsers and offers a graceful degradation for unsupported browsers. Feel free to download the plugin, and use the Comments section to leave feedback or feature requests.

Download the plugin and follow the installation instructions, or use the feature Add New under Plugins in your WordPress installation to search for this plugin for an automated installation.

You can take a look at the plugin in action with audio and video playback. Try them out with different browsers.

Description and Features

Embed video and audio on your website using shortcodes. The plugin enables html5 native playback for users with compatible browsers while offering an elegant degradation to other users through very lightweight Flash players. For html5 playback, it auto-detects and offers different alternatives, or degrades to Flash, and (failing even that) to download links.

Typical usage is simply [audio src="http://myblog.com/wp-content/uploads/2009/09/mysong"]

The plugin will make sure this does the following:

  1. If the user has an HTML5 support for video and audio, it will play the media natively in an appropriate format.
  2. Otherwise, if the user has Flash, it will play the media in lightweight Flash players.
  3. Otherwise, there will be a link for the audio or video files so that the user can still play them using their installed software players.

The plugin also allows you to provide only one version of the file (and force Firefox to fallback to Flash).

Codecs and browsers: The current situation with HTML5 is not ideal. For video, you should supply two formats to support all browsers. But if you do not mind forcing Firefox to fall back to Flash, you can provide H.264 version only. See the tables below to see what file will be played based on the support in the current browsers.

VIDEO           Flash   H.264   Ogg Theora
                .flv     .m4v      .ogv
Firefox 3.6      -          -        X
Safari 4.0       -          X        -
Chrome 4.0       -          X        X
Other (Flash)    X          X        -

When a browser supports multiple formats and the files are available, the preference goes from left to right (e.g. Chrome will prefer the H.264 format; reflecting the quality of the codecs). The FLV format is optional and it is provided for backwards compatibility to play older FLV-only videos either alone (no HTML5 video) or as a preferred fallback version when used alongside versions converted to H.264 and Ogg.

AUDIO         WAVE   MPEG-4   Ogg Vorbis   MPEG
              .wav    .m4a       .oga      .mp3
Firefox 3.6     X       -          X         -
Safari 4.0      X       X          -         X
Chrome 4.0      -       X          X         X
Other (Flash)   -       -          -         X`

For audio, you have to include at least .mp3 and .oga/.ogg versions to cover all browsers. (Or, you can supply .mp3 only which will force Firefox to fall back to Flash). Other formats are optional. Again, the preference for multiple available files in browsers supporting multiple codecs is left to right.

The Flash players used are a standalone version of WordPress Audio Player by Martin Laine, and Videoplayer by Mr.doob.

Usage Instructions

Currently, there is no settings panel. All you need is the syntax for the shortcodes explained below.

Audio
Basic syntax: [audio src="File URL/path"]
Advanced syntax: [audio src="File URL/path" options="special string" id="string" format="special string"]

Example:
[audio src="http://myblog.com/wp-content/uploads/2009/09/mysong" options="autoplay loop controls" id="header-audio"]

  • src is required. It must be an absolute or relative path to audio with the file name (“mysong”, in the above example). The files need to be located somewhere in your content folder (usually ‘wp-content’) unless you specify the files using the format option. File extension can be omitted. Upload “mysong.mp3”, “mysong.ogg” etc. as applicable to the specified location.
  • options is optional. It is a space-separated list of attributes defining the player behavior: autoplay to start playback automatically; autobuffer to start preparing the playback, controls to display the built-in playback controls (otherwise you can build and hook up your own), and loop to start from the beginning when the end is reached. The default value is "controls autobuffer".
  • id is optional. If you do not include one, the audio tag will have an automatically generated ID of html5audio-number. The IDs for the Flash players are prefixed with f-.
  • class is optional. It is applied to a ‘wrapper’ div and to the audio tag. If you do not include one, the class will be ‘html5audio’.
  • format is optional. It is a space-separated list of available file formats. (Recognized values are auto, m4a, mp3, oga, ogg and wav.) The default value is auto which autodetects the formats. You can specify a list of available formats manually instead (e.g. format="oga mp3 wav").

Video
Basic syntax: [video src="File URL/path"]
Advanced syntax: [video src="File URL/path" width="pixel size" height="pixel size" options="special string" id="string" format="special string"]

Example:
[video src="http://myblog.com/videos/vidclip" poster="http://myblog.com/wp-content/uploads/2009/09/clip-teaser.jpg" width="320" height="240" options="autoplay" id="vid-1"]

  • src is required. It must be an absolute or relative path to video with the file name (“vidclip”, in this example). The files need to be located somewhere in your content folder (usually ‘wp-content’) unless you specify the files using the format option. File extension can be omitted. Upload “vidclip.ogg” (in Ogg Theora format) and “vidclip.m4v” (in mp4 format) to the specified location.
  • poster is optional. It is a URL to the image you want to display before the video loads/starts playback. (If a jpg with the same file name can be detected, it will be used when ‘poster’ is not specified.)
  • width and height are optional. The default size is 480×320 (which is the resolution of iPhone; larger videos might not play back on iPhone/iPod Touch).
  • options is optional. It is a space-separated list of attributes defining the player behavior: autoplay to start playback automatically; autobuffer to start preparing the playback, controls to display the built-in playback controls (otherwise you can build and hook up your own), and loop to start from the beginning when the end is reached. The default value is "controls autobuffer".
  • id is optional. If you do not include one, the video tag will have an automatically generated ID of html5video-number. The IDs for the Flash players are prefixed with f-.
  • class is optional. It is applied to a ‘wrapper’ div and to the video tag. If you do not include one, the class will be ‘html5video’.
  • format is optional. It is a space-separated list of available file formats. (Recognized values are auto, flv, m4v, ogg and ogv.) The default value is auto which autodetects the formats. You can specify a list of available formats manually instead (e.g. format="ogg m4v").

If you find this plugin useful, you can rate it and link to this page. If you don’t like it for some reason or have suggestions, feel free to leave feedback and comments on this page.

Manual Installation

  1. Download the file and upload the unzipped folder degradable-html5-audio-and-video to your plugins directory.
  2. Activate the plugin through the ‘Plugins’ menu in WordPress
  3. And then follow the usage instructions above

Frequently Asked Questions

If your files do not play properly, check the following points:

So what file formats are required?
Only mp3 for audio, and m4v for video. When ogg versions are missing, JavaScript is used to force Forefox to fall back to Flash. To fully support HTML5 audio and video and bypass JavaScript, include the Ogg versions. All other audio formats are optional. To support migration from legacy video files, it is also possible to use this plugin for playback of FLV files only.

The final html code looks fine but doesn’t play in Firefox/Safari
The server needs to be configured to serve the video files with the proper MIME type. (Setting the type through HTML code alone is not sufficient.) On a Linux host, you can add the following lines to the .htaccess file:
AddType video/ogg ogg ogv
AddType video/mp4 mp4

Are there limitations on formats and extensions?
The plugin requires specific file formats and extensions. For Ogg formats, the extension has to be .ogv or .ogg for video, and .oga or .ogg for audio. H.264 format needs the extension .m4v, and MPEG-4 audio m4a. Follow the instructions for the best results. If you decide not to create two versions of video (using e.g. ffmpeg2theora), and you provide only the H.264 file, the plugin will detect this and will use JavaScript to play the file in Firefox using the fallback player.

The plugin does not recognize the location of my files
The current version of the plugin will fail if you link to the audio or video using the attachment ID. If you store the files on a different server or outside of your wp-content directory, use the format option to manually specify the available file formats; this bypasses the autodetection that requires the files in the content directory of WordPress. On some configurations, you need to specify the location using a server path (e.g.

Audio MP3
); this can be outside of wp-content but if it is, specify the ‘format’ option.

Can I change the look or behavior of the fallback players?
For audio, you can. Refer to the available options and add lines to the file degradable-html5-audio-and-video.php under the heading Format the player by inserting lines here.

What if the plugin conflicts with another plugin?
There is a known conflict with Viper’s Video Quicktags. If you use that, download a modified version of Degradable HTML5 plugin from my website. This uses syntax [html5audio …] and [html5video …] to prevent the conflict. Audio Player might also not work but you can use Degradable HTML5 plugin to play the audio files instead (it uses the same Flash player and will give the users native HTML5 playback on supported browsers). If you experience problems, try deactivating plugins to determine if there is a conflict.

Changelog

Feel free to leave comments with requests for features or changes. My goal is to keep the plugin lightweight but I am open to ideas.

1.8.2

  • Addressed problems caused by v1.8.1. If you still have problems with 1.8.2, I updated the ‘does not recognize the location’ in FAQ.
  • Added optional class parameter applied to the wrapper div and to audio and video tags. Defaults to ‘html5audio’ and ‘html5video’.

1.8.1

  • Fixed a bug where on some server configurations, the Flash fallback video player would not play the file.

1.8.0

  • Added support of FLV videos (works either as simple Flash playback, or as a prefered version of fallback player when H.264/Ogg versions exist)
  • Added support of .ogv and .oga extensions in autodetection and manual format setting (.ogg continues to work)

1.7.1

  • mp3 only is now acceptable for audio. See “So what file formats are required?” in FAQ
  • Updated the Flash Audio Player to the latest version
  • Added “What if the plugin conflicts with another plugin?” to FAQ
  • Fixed the compatibility table: Chrome can play MP3 using HTML5
  • Added a call to enqueue jQuery (needed if ‘avoiding’ Firefox)

1.6.1

  • For a video poster, the plugin will attempt to detect a jpg with the same file name and use it when ‘poster’ is not specified
  • Fixed a bug where H.264-only videos would not play in IE8

1.6.0

  • For audio, you now do not need to provide the Ogg files (This uses JavaScript to force Firefox to the Flash fallback.)
  • New format option to manually specify available file formats (avoids auto-detection and allows storage anywhere)

1.5.1

  • For video, you now do not need to provide the Ogg Theora files. If only H.264 version is available, Firefox will be served with the Flash fallback.
  • Due to the auto-detection involved, video files should be somewhere under your content folder (usually ‘wp-content’). UPDATE: Unless you use manually override this (using v.1.6.0).

1.4.2

  • Compatibility with WordPress 2.9 and 2.9.1

1.4.1

  • The width and height of the HTML5 video element is now explicitly set

1.4.0

  • The autoplay and loop options (if used) are also applied to the Flash fallback audio player
  • The plugin accepts relative paths (e.g.`/wp-content/uploads/2009/09/new_world` in addition to `http://soukie.net/wp-content/…`)
  • If the path and name to media includes the file extension (‘.mp3’ etc.), it will be ignored and the media will function properly

1.3.0

  • Fixed a problem with the audio Flash player introduced by incorrect upload of v1.2 (affected some users). Apologies!
  • Switched to a three-digit version numbering.

v1.2

  • The audio files no longer need to be under the ‘uploads’ directory but anywhere within your content (usually ‘wp-content’).
  • Updated the way IDs are applied to the fallback Flash players (they use the supplied or generated ID prefixed with ‘f-‘).

v1.1

  • Added optional attribute options to define the player behavior (default is: show built-in controls, buffer media when page loads but do not start autoplay and do not loop).
  • Added support for .wav (wave) audio (the preferred source, if present).
  • Fixed bug with incorrect IDs of the fallback Flash players.
  • Expanded documentation to cover available codecs, Google Chrome 3.0 and options.

v1.0

  • Initial version.

290 Comments »

feed icon Feed

Chris Eveleigh, January 14, 2011:

@pavel thanks for a great plugin! hope the below helps.
@jeff if you don’t have a m4v then the fallback flash player tag doesn’t get closed. edit degradable-html5-audio-and-video.php and insert “” before “” in line 135 so that it reads:
$output .= $fallbackpl.”;

Chris Eveleigh, January 14, 2011:

heh, let’s see if we can get the tags to appear:

insert “</object>” before “</div>” in line 135 so that it reads:
$output .= $fallbackpl.'</object></div>';

Thomas Hall, February 5, 2011:

Forgive me if this is something you have covered or if it is there is a coding convention that I should be aware of (I read most of the 200-odd comments).

For the buffer options you instruct on autoplay and autobuffer (and default to autobuffer). If we don’t like the bandwidth or the repeated loads of video that a viewer may have already seen, what is the proper way to NOT buffer or request the actual video file until the viewer has clicked on the embed or a control?

Thanks, by the way. Appreciate your work 🙂

Thomas Hall, February 5, 2011:

Scratch that last question, sorry. I found your answer to Jalopyhead.

Cam, February 6, 2011:

Hey there! Great plugin!! Have used it on a number of sites. But recently I have installed the plugin on one of my sites and it doesn’t seem to be working?

the video tag just shows up in the page content without inserting the player?

see:http://contly.beautiful-garbage.com/

–> [video src="http://contly.beautiful-garbage.com/contly-ups/uploads/2011/02/strutta-video" format="m4v ogv flv" width="390" height="220"]

shows up in the page content?

Any idea whats going on?? The plugin is correctly installed and files have all been uploaded correctly?

Please Help!!

nitGreen, February 8, 2011:

Hey,

Great plugin mate,

I will definitely try it.

David, February 16, 2011:

Hey there,

Id like to use this plugin via the php widget. I jusy need to know the php call to add to the shortcode to get it to appear…?

SpyCam, February 17, 2011:

I want to use your plugin with 3 different formats of videos that mobile devices could play:
1) H.264 mp4
2) mp4 (that older phones use)
3) 3gp (old video format)

I tried it, and without some manual code editing it won’t show any of the videos in player (even h.264 mp4).
What do i need to do, to show h.264 mp4 videos in HTML5 player (if it’s available, for Iphones and others) or in flash player (when HTML5 not available) and to show a link to downloadable mp4 or 3gp videos? I couldn’t get it to work.
Also, i couldn’t get to show poster.
Thank you

SpyCam, February 18, 2011:

OK, i got it working, by manually tweaking the PHP of your plugin.
The last question is why it is not showing “poster” image in the flash player’s video window?

zenfred, March 1, 2011:

Works great; is there a way to turn off the animation, so it’s always open? My listeners need to pause and play a lot so it would be much better if they didn’t have to chase the button back and forth.

Jiang Long, March 8, 2011:

Bug report:

In the Degradable HTML5 audio and video Plugin source code, on line 135, the closing </object> tag is missing. It should read:

$output .= $fallbackpl.'</object></div>’;

Jonathan, March 9, 2011:

Great player – thank you. Just wondering if you have multiple instances of the player on a web page is there a way for one player to stop playing when another is started?

Thanks for your help,

Regards
Jonathan

shag, April 28, 2011:

Actually, I take back my request to have multiple players stop when appropriate, it appears that is working!

Fashionably Late Mag, September 28, 2011:

On my page, I can’t insert more than one player. when i leave the code more than once only one player shows in a post but plays the media from the last code entered.
eg: i enter the code for 5 players with songs but it only shows for the 1st code and plays the media from the last

Fashionably Late Mag, September 29, 2011:

I can’t get more than one player per page. I’m only using the basic code centered.

[audio src="http://media url" id="header-audio"]

Kat, October 4, 2011:

Great plugin but need one that supports webm video files. Will you be updating the plugin to support this format in the future?

Allen Sanford, February 21, 2012:

The flash fallback will not auotplay.

K, April 7, 2012:

Your plugin doesn’t work on safari 5 nor on mobile devices.

Martin Bailey, April 11, 2012:

Thanks so much for this plugin. It’s nice looking, fast loading, and works across just about all platforms, even my iPhone!

I am having problems at the moment on Chrome though. None of the audio on my site plays with the current version of Chrome (18.0.1025.151) on Mac OS X 10.7.3 and none of the samples you have here play either. The players counts up time as though it’s playing, but there’s no audio. I have of course checked that my speakers are turned up etc. All other audio is fine. I kind of assume that it’s a Chrome problem, as even on my site, the audio works with all other browsers. If anything can be done to overcome this though, that would be great.

Otherwise, thanks so much for what you do here. Great job!

Hannah, April 18, 2012:

I get a big black box on Internet Explorer. It works great everywhere else…

anybody else have problems with this that can give me a hand?

Russ, June 4, 2012:

I have tried your plugin and provided ogv, mov and m4v files on the server, but for some reason it ALWAYS wraps the m4v inside a SWF on Safari and Firefox. Additionally, when I go to that URL with an iPad, the video doesn’t show up at all. Can you provide any guidance?

Darkcus, August 1, 2012:

the plugin doesn´t work

michael lauzardo, August 7, 2012:

I installed your pluggin in a clients site but it doesn’t work in chrome. It works in safari & firefox last i checked. Could really use your help.

thanks!
Mike

ถุงมือแพทย์, September 14, 2012:

In the Degradable HTML5 audio and video Plugin source code, on line 135, the closing tag is missing. It should read:

ถุงมือแพทย์, September 14, 2012:

Id like to use this plugin via the php widget. I jusy need to know the php call to add to the shortcode to get it to appear…?

Milah Bee, November 17, 2012:

I can’t figure out how to get rid of this “Track 1”. Doesn’t seem like the site is being “manned” but hoping I get a response. 🙂

Daniel, May 28, 2013:

I’m developing a production music library and would like to know if I can use ONE player and trigger audio from html links elsewhere on the page. I will have many tracks per page and don’t want to have to instantiate lots of players. Thx! If I can do this, can you point me to an instruction file? (I’m developing in WordPress).

Trackbacks/Pingbacks

Your comment