=== Degradable HTML5 audio and video ===
Contributors: soukie
Author URI: http://soukie.net/
Donate link: http://soukie.net/support-this-site/
Tags: audio, html5, shortcode, video
Requires at least: 2.6
Tested up to: 2.8.4
Stable tag: 1.4.1
Shortcodes for HTML5 video and audio, with auto-inserted links to alternative file types, and degradable performance (lightweight Flash and download).
== Description ==
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.
1. Otherwise, if the user has Flash, it will play the media in lightweight Flash players.
1. 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](http://wpaudioplayer.com/standalone) by Martin Laine, and [Videoplayer](http://code.google.com/p/mrdoob/wiki/videoplayer) by Mr.doob.
[Plugin Homepage](http://soukie.net/degradable-html5-audio-and-video-plugin/)
= 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](http://soukie.net/degradable-html5-audio-and-video-plugin/). If you don't like it, feel free to leave feedback and comments on the webpage.
== Installation ==
1. Upload the unzipped folder `degradable-html5-audio-and-video` to your `plugins` directory.
1. Activate the plugin through the 'Plugins' menu in WordPress
1. And then follow the usage instructions on the Description page
== 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 to the 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 under *Description* for the best results.
= 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.
= Can I change the look or behavior of the fallback players? =
For audio, you can. Refer to the [available options](http://wpaudioplayer.com/standalone "The options are listed at the end of the page") and add lines to the file `degradable-html5-audio-and-video.php` under the heading `Format the player by inserting lines here`.
== Screenshots ==
1. HTML5 video in Safari, Firefox and the Flash fallback
2. The audio players (native and Flash)
3. HTML5 video and audio in Chrome 3.0
== Changelog ==
= 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 (affects some users). Apologies!
* Switched to a three-digit version numbering.
= 1.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-').
= 1.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.
* Documentation expanded to cover available codecs, Google Chrome 3.0, and options.
= 1.0 =
* Initial version.