Plugin Directory

Degradable HTML5 audio and video

Author: Pavel Soukenik

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.

Refer to the Instructions section below on how to use the plugin.

Codecs and browsers: The current situation with HTML5 is not ideal. See the tables below showing the formats supported in the current browsers. When you supply multiple formats, the plugin tries to play the file using an applicable codec from left to right (e.g. in Chrome, the video will be in H.264 format).

VIDEO           H.264   Ogg Theora
                .m4v      .ogg
Firefox 3.5      -         X
Safari 4.0       X         -
Chrome 3.0       X         X
Other (Flash)    X         -

So although Chrome supports both formats, you need to create your video files in two versions.

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

You currently have to include an .mp3 version, and also at least the .ogg version. The other formats are optional.

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

Plugin Homepage

Instructions

There is no settings panel. All you need is the syntax for the shortcodes.

Audio

Basic syntax: [audio src="File URL without extension"]

Advanced syntax: [audio src="File URL without extension" 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'). Note that you do not need to include the extension. Upload "mysong.mp3" and "mysong.ogg" (optionally also "mysong.m4a" or "mysong.wav") 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-.

Video

Basic syntax: [video src="File URL without extension"]

Advanced syntax: [video src="File URL without extension" width="pixel size" height="pixel size" options="string" id="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). You do not need to include the extension, and there is no restriction on the URL location. 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 480x320 (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-.

If you find this plugin useful, you can rate it and link to the plugin. If you don't like it, feel free to leave feedback and comments on the webpage.

Download

FYI

Compatibility beta

Your Setup

Log in to vote.

The Consensus (1 reporting)

No data
0,1,0

Average Rating

5 stars
4 stars
3 stars
2 stars
1 star
(2 ratings)