Soukie's Place

Degradable HTML5 audio and video 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 ignore “ogg” versions and force Firefox to fallback on Flash.

Codecs and browsers: The current situation with HTML5 is not ideal. For video, you have to 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 showing the formats supported in the current browsers.

VIDEO           H.264   Ogg Theora
                .m4v      .ogg
Firefox 3.5      -         X
Safari 4.0       X         -
Chrome 3.0       X         X
Other (Flash)    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).

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

For audio, you have to include at least .mp3 and .ogg versions to cover all browsers. (Or, you can supply .mp3 and .m4a only which will force Firefox to play mp3 in 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"]

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-.
• format is optional. It is a space-separated list of available file formats. The default value is auto which autodetects the formats. You can specify a list of available formats manually instead (e.g. format="ogg mp3 wav").

Video
Basic syntax: [video src="File URL/path"]
Advanced syntax: [video src="File URL/path" width="pixel size" height="pixel size" options="string" id="string" only="H.264"]

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 an URL to the image you want to display before the video loads/starts playback.
• width and height are optional. The default size is 480×320 (resolution of iPhone which does support embedded videos on pages).
• 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-.
• format is optional. It is a space-separated list of available file formats. 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:

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
AddType video/mp4 mp4

Are there limitations on formats and extensions?
The plugin requires specific file formats and extensions. Partly, this is because the current support in browsers is limited. E.g. Firefox 3.5 will not play the Ogg video unless the video has the extension .ogg (.ogv would not play). Follow the instructions for the best results. If you do not wish 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 the files
This should not happen if you follow the instructions. 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, use the format option to manually specify the available file formats; this bypasses the autodetection that requires the files to be present within the content directory of WordPress.

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.

Changelog and Roadmap

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