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.

281 Comments »

feed icon Feed

Billy, November 29, 1999:

I’m loving this plugin and I hope that you continue to update and develop it!!

thank u for this plugins , i really needet that :)

Andreas Koutsoukos, September 22, 2009:

Hello.
I just try to test te plugin, but there is something bug.

I just write blog post and in the html i write this
[audio src="http://www.skenevisuals.com/andreas/wordpress/wp-content/themes/blogi/audio/test" options="autoplay loop controls" id="header-audio"] but in the site it says this “No audio files uploaded, make sure you added it as audio.” what i do wrong.

Pavel Soukenik, September 22, 2009:

Hello Andreas, there was a limitation for [audio] that the file needed to be somewhere in the “uploads” directory of your WP content. I fixed this to allow audio anywhere within the content directory. (The plugin did and does allow for custom name of the wp-content.) Thanks for pointing this out!

shareAll, September 22, 2009:

After installing on WordPress page, I get preloader but no audio loads.

I’m using an mp3 file in the uploads directory.

[audio src="http://www.pameladunn.org/wp-content/uploads/BrightFuture" options="controls autobuffer" id="header-audio"]

Any suggestions?

Pavel Soukenik, September 22, 2009:

It seems you did not provide an .ogg version; so it will only work with Safari or Chrome but not in Firefox. (And Explorer should use the Flash player anyway). There are many tools that allow you to convert an MP3 to OGG. Simply create the .ogg version with the same name and upload to the same folder as the MP3. Hope this helps.

Just a side note that [audio src="http://www.pameladunn.org/wp-content/uploads/BrightFuture"] should be sufficient for you. (controls and autobuffer are the default when you leave out the options, and unless you plan to specially control or format the players, you do not need to specify the ID either).

Paulius, September 23, 2009:

I added poster, but with Firefox 3.5.3 I can’t see it. Firstly I thought that .png format is not supported, but .jpg did not help me.
Any suggestions?

Pavel Soukenik, September 23, 2009:

Unfortunately, Firefox will support the poster attribute only from version 3.6. Also, the HTML5 working draft specifies that the browsers (after the video media loads) can choose to display either the poster, or the first frame of video “at [their] discretion.” (Which I think is unfortunate; e.g. Safari supports ‘poster’ and switches to the first frame when it can.)

mike, September 23, 2009:

Hi there,
I’m testing this out for a site at the mo to play mp3′s, it works well and looks great (kudos) except that the ‘options’ don’t seem to get implemented- they are left hanging in the audio tag. Any thoughts? cheers!

Pavel Soukenik, September 23, 2009:

Hi Mike, that is actually on purpose. If you’re looking at the generated HTML, and see something like audio autoplay loop controls id="html5audio-0" … at the beginning, that’s perfectly fine and proper syntax. (This example would be the result of specifying options="autoplay loop controls" as part of the shortcode.)

Adam Zaninovich, September 29, 2009:

On my text server, the plugin was working great. Not so much after moving to wordpress linux hosting. I have both m4a and ogg copies of the files (working on mp3) but they don’t load on safari4 or ff3.5. When I look at the generated code, it only has the line for an mp3 file… m4a and ogg are missing. What’s wrong? As a test I wrote a correctly formatted html5 audio page to make sure the server can serve up the correct file types. Check it out if you want: http://thezanino.com/test/

Pavel Soukenik, September 30, 2009:

Hi Adam, can you send me the complete text of the shortcode you were using? It seems the plugin has trouble verifying the existence of the m4a and other versions. And yes, I checked the test page you created and it’s working fine. Thanks for being persistent! Update: We diagnosed it and it was caused by not using the exact required syntax for the “src”. That being said, the new version now allows relative paths and tolerates file extensions.

VVOR, October 2, 2009:

STUNNING PLUG ! Tnx

Vlad, October 7, 2009:

Halla everyone.
I just installed the player, also uploaded the mp3 file and ogg file into uploads folder but it doesn’t work.
The browser sees the player, but it gets an error like: Connecting… File not found.
Any suggestions ? What can be done ?

Pavel Soukenik, October 7, 2009:

Hi Vlad, can you email me with the text of the shortcode you are using in the post?

Jordi Petit, October 8, 2009:

Hello,

I have a bug report on v1.4.0: Handling of audio files is incorrect, as the $filename is not constrcuted correctly.

The following lines do now work for something like [audio src="/audio/file"], whereas the [video] handler works well in this case (its code is much simpler).

Pavel Soukenik, October 8, 2009:

Hi Jordi, the audio code needs to check for the existence of the possible files (wav, mp3, ogg…). As a limitation, the file must be located somewhere in your wp-content. It should work correctly with both absolute and relative paths, and also with custom locations of the content directory. Let me know if this is not working for you.

Jordi Petit, October 8, 2009:

Hello. Another bug report

In videos, width and height are not taken into account (at least under firefox 3.5). Solutions is simple:

$output = ‘<video width='.$width.' height='.$height.' '. $options;

Pavel Soukenik, October 8, 2009:

You are correct, the size was not explicitly set and was taken from the poster/video file. I have fixed it so you can now override the size. (I had overlooked this code was defined only for the fallback player.)

Adam, October 10, 2009:

Tried to embed a Youtube video on my site. It appears to show the player controls at first and then it gets lost with a big x in the middle. Here is my shortcode: [video src="http://www.youtube.com/watch?v=IOIJHh3mKcQ" poster="http://i2.ytimg.com/vi/IOIJHh3mKcQ/default.jpg" width="380" height="344"]

Looks like a great plugin!

Pavel Soukenik, October 11, 2009:

Hi Adam, unfortunately, this plugin is not designed to embed YouTube. Technically, it could be done but without the ogg format present, the value would be limited. I would recommend that you use one of the YouTube plugins for that, and my plugin for your own videos.

John, October 21, 2009:

Hi I’ve installed your plugin and have tested it with an mp3 I had lying around. It seems to work in everything on PC, but with firefox 3.5.3 on my macbook I get a dark grey box with a faint ‘x’ in the middle. Other browsers on the mac seem fine. HTML and PHP I can handle, but I have no idea about audio files. Any ideas? Cheers.

Pavel Soukenik, October 25, 2009:

Hi John, sorry for the late reply. You need to convert the mp3 to an ogg format and save it in the same location. Firefox does not support mp3 playback in native HTML5. See the format compatibility table.

wille, October 28, 2009:

Would be cool if the plugin had support for audio located in others servers. I prefer update great files in public servers, like archive.org.

Pavel Soukenik, October 29, 2009:

Thanks for the suggestion. I’ll think about a good way to do that and will implement this in the next update.

Shazron, October 30, 2009:

Awesome plugin – just reporting an OS quirk:

When I set the poster attribute for video, on Leopard h.264 plays fine under Safari 4.0.3.

However on Snow Leopard with Safari 4.0.3, when the poster attribute is set, playing h.264 only shows the poster, and the video cannot be played.

My guess is this is a quirk with Quicktime Player X.

Ben, November 13, 2009:

Neat plugin, though I question your choice of FLV player; it doesn’t keep parity with the browser-native players– no play/pause/stop buttons, no time, no loading indicators.

Might I suggest OS-FLV?

Pavel Soukenik, November 13, 2009:

Thanks for the suggestion Ben! I took a look at the plugin (because I would also love a better-featured fallback player for the video) but it does not seem to support either .m4v (H.264) or .ogg (Ogg Theora) format and therefore, for it to work as a fallback to HTML5 formats, you would need to supply yet another version of the video file. Anyway, let me know if I overlooked the m4v or ogg support, or if you run across any other suitable player. Thanks again!

Markus, November 19, 2009:

Thanks for your plugin! It works great in FF, Opera, Safari an IE. But the flash-player doesnt wrap right and looks not very nice. Did you test it?

And: it ist possible to style mye own flash-player/use another flash-player?

Thanks for your time & work!
Markus

Pavel Soukenik, November 19, 2009:

Hi Markus, is the first issue related to the audio or video Flash player? For styling the player, see the answer in FAQ (above). Currently, it is not possible to use your own player without modifying the plugin. Do you have any suggestions for alternative players? Thanks, Pavel

JSDK, November 21, 2009:

in my site, mp3 and movies don’t load ;/ Firefox and Chrome pls help http://jsdk.pl

np http://jsdk.pl/index.php/moje/rapowanie/zniszczony-przez-wojne/

Christiaan, December 1, 2009:

Hi Pavel, what should I be doing if I want to add a style class to the video tag, such as for aligning the video on my page?

If I add it to the shortcode it seems to get removed by the plugin. Any ideas?

Christiaan, December 13, 2009:

It would be nice to have some settings to alter the text people see when they can’t view the video.

doeme, January 5, 2010:

hi

i tried to use your plugin on my blog. when i implement a mp3 file from another website it works, but not with files from my page, i only see a big X.

when i try to show a video, i only get “[ERROR: No URL was passed to the generic video BBCode]”

what am i doing wrong :( ?

Patrick, January 6, 2010:

You know what would be great? A plugin to automatically convert M4V to OGG, or the other way round, depending on what you upload. Of course that would need ffmpeg or something like that on the server, but it could be done. It would be extremely useful in conjunction with this plugin. Maybe it could even be built into this plugin?
Anyway, love it! Thanks for the great work!

Pavel Soukenik, January 16, 2010:

Sorry for not responding for so long!
@JSDK and @doeme: I’ll get in touch with you via email.
@Christiaan: Good points. For styling, you can assign the your own ‘id’ (or use the generated one) and use that to style video in CSS. For message, do you mean the “Could not use HTML 5 or Flash for playback…”?
@Patrick: Thanks! Programming what you suggest is beyond my skills. And it would likely be too intense to carry out in real-time. Let me know if someone does this.

Flo, January 23, 2010:

hi,
thanks for the plugin, that is exactly what I was looking for.

I would have a feature request, it would be nice if the fallback variants could be choosen by the user. i.e. I don’t want to encode my videos in different formats, I just provide the ogg version, and all people with a browser not capable of viewing it, should get a simple download link.

so, a little form, where you can arrange the fallbacks in order or disable it at all, with custom text to show if disabled, would be my idea.

Pavel Soukenik, January 23, 2010:

Yes, this is a good suggestion! It’s not that difficult, so I am going to implement this in the next couple of days.

Nate Steiner, January 28, 2010:

I’d love to use this plugin, but hosting video files on the same server as my WP is a no-go for me. Is there a way to turn off the auto-detect so I can point to files on an S3 server or whatnot? Excellent work regardless!

Pavel Soukenik, January 28, 2010:

I see. I will adapt it so you could override this and provide the list of available formats manually (for both video and audio).

Pavel Soukenik, January 28, 2010:

The download on this page is now 1.6.0. It allows leaving out ogg also in audio, and if you need to store media files anywhere, use the optional manual specification of formats: [video
src="http://file.goes/here" format="ogg m4v"] [audio
src="http://file.goes/here" format="mp3 ogg m4v"]
. Documentation update and automatic upgrade coming soon.

CoSTa, February 1, 2010:

Hello
I’m trying to use your plugin but I have problems. It works under Firefox and Safari but when it comes to Flash (Opera, IE), the Flash player does not load :/. IE anounces an error in format like this: http://img.skitch.com/20100201-xm5w2arxganc64ir3tqnnbf1pt.jpg (I know, it’s in Polish but you should be able to figure out what it says).

I don’t know how to solve this problem. Please, help!

Pavel Soukenik, February 1, 2010:

CoSTa, can you put it on a page (so it’s not visible as a post) and mail me a link to it together with the shortcode used? I’ll check it.

Bill, February 2, 2010:

Using the latest version, all I can get is:
[ERROR: No URL was passed to the generic video BBCode]

My Page:
http://ripple.ca/?page_id=3786

Can you help? Thanks.

Pavel Soukenik, February 2, 2010:

I don’t see any video or error message but from the code, it seems you might have a conflict with the Viper’s video plugin. I will email you a “renamed” version to see if it will work then.

Bill, February 3, 2010:

Thank you for your fast reply, Pavel! I think you are right about the Viper conflict. The plugin works now for Safari but does not yet fall back to Flash in Firefox. I am going to try an ogg version of my video and see if that makes Firefox happy. Your help is much appreciated.

CoSTa, February 3, 2010:

Thank you Pavel for the fast reply! It seems like the last update solved my problem. Now for some more testing with IE and if it will be all right, off we go with you plugin :)

Thanks and good work!

Stu Helm, February 8, 2010:

Hi Pavel,

Fantastic plugin, currently trying it out at http://stuhelm.com/2010/02/test-of-html5-audio-for-imp/ for future full scale usage on http://impodcast.tv.

Just a couple of questions, is there a way to force Chrome to fallback to Flash, our podcast will always be just mp3 formatted for audio and of course Chrome doesn’t support this.

Also, will the shortcodes work in the WP templates? What we’re trying to do is build the plugin into our theme so that when we post something under our shows category we use some code to pull the enclosure URL and strip off the extension.

Thanks,

Stu

Glen, February 9, 2010:

Thanks for such a nice piece of work!
I do have a problem though, and that is that when loading the page in IE for some reason the Flash player is not being used to play the video. Using Firefox my post correctly plays the video using Theora, and using Chrome it correctly plays using h.264, but when I visit my post with IE, I don’t get Flash.
If you could take a look and give suggestions, I would be grateful. A test post that is not working in Flash is at: http://www.test.pubscott.com/bloga/?p=6
Thanks!

Pavel Soukenik, February 9, 2010:

@Glen: Yes, there was a bug :-( 1.6.1 fixes this.
@Stu, I can consider this but mp3-only would play HTML5 only on Safari. For templates, I do not think that shortcodes work in template files.

Frank, February 9, 2010:

Pavel,

Great Plugin, Thank you! Would we see a Playlist any time soon….? That would be great..!

Frank

Glen, February 9, 2010:

Wow, that is quick turnaround Pavel!
In 1.6.1 Flash works in IE :-)
HTML5 h.264 works in Chrome :-)
HTML5 Theora doesn’t work with Firefox :-(
1.6 did work fine with Theora and FF.
Thanks for all your help Pavel!

Frank, February 10, 2010:

Pavel,

can you please add the information, that video on the iphone only works with 640×480 resulution – not more.

Frank

Bill, February 10, 2010:

Pavel, I’m the guy you helped with that conflict that was happening with Viper’s plugin. There is also a conflict with Mark Laine’s Audio Player plugin. It cannot find and play a source file if Degradable HTML5 audio and video Plugin is active. I have upgraded to your latrst version (1.6.1).

Also, the [html5video src="..."] tag does not seem to work with the 1.6.1 version.

Pavel Soukenik, February 11, 2010:

I don’t have an elegant solution yet (I don’t want to break the functionality for existing users). For the time being, here is an alternative version of 1.6.1 which has html5audio and html5video shortcodes to prevent conflicts: 1.6.1b

Pavel Soukenik, February 11, 2010:

Thanks for the suggestions, Frank. Playlist is an ambitious goal but let’s see where I get with this.

Bill, February 11, 2010:

Pavel, the [html5video] and [html5audio] fix seems logical to me, elegant or not, but Viper’s plugin and the Audio Player plugin still break if I activate your plugin.
Here’s a broken video example: http://ripple.ca/?p=1807
And a broken audio example:
http://ripple.ca/?p=3844
Your plugin is active and working at:
http://ripple.ca/?page_id=3786

Pavel Soukenik, February 11, 2010:

That’s surprising. I’ll check it tomorrow! (I’m in Europe now so got to go to sleep).

Pavel Soukenik, February 13, 2010:

Version 1.7.1 is available for download on this page now, and should address all known issues. It also allows “MP3 only”. Check the changelog and FAQ.

Frank, February 13, 2010:

Pavel,

maybe this is the playlist you are searching for….
http://plugins.jquery.com/node/12713

Frank

Pavel Soukenik, February 13, 2010:

@Frank: Nice! That script can be used with HTML5 video/audio directly. Extra work will be adapting this so it works in the fallback Flash players, but yes, it’s doable and I’ll give it a go.

Bill, February 13, 2010:

Pavel, your plugin works to deliver H.264 from my server video to an iPod Touch. Since iPhones and the upcoming iPad will not do Flash video, that was one of my chief interests in your work here. Nice going!

Your plugin also works well for Safari, Firefox and Chrome, on my iMac. It is playing all of my MP3 audio as well.

Pavel Soukenik, February 14, 2010:

That’s great Bill! Thank you for helping me troubleshoot the two bugs.

Antonio, February 16, 2010:

Hello Pavel,
since wordpress 2.9.2 the audio player plugin I have seems to be broken, so I looked for an alternative and tried yours.
Now, things don’t seem to work the same in different browsers: WordPress 2.9.3, Audio player plugin deactivated, Viper’s Video Quicktags plugin activated.

Degradable HTML5 audio and video Plugin (b version) activated (but also worked with the normal version). Page with embeded audio files: http://www.s-oe-s.de/index.php/downloads/medienarchiv/

Firefox 3.5.3 -> Flash, Opera 10.10 (1893) -> broken, Safari 4 Public Beta (528.17) -> broken, Internet Explorer 8.0.6001.18882 -> Flash.

Pavel Soukenik, February 16, 2010:

I’ve checked and it works except for the first audio file (I assume that’s what you meant). Do you use the same syntax for all shortcodes (no typos)? If so, this could be a misbehavior of another plugin (I’ve noticed a JavaScript page tracker that inserts its code into all links, including for the audio playback). Try to deactivate other plugins temporarily to see if it helps.

Stefan Segers, February 19, 2010:

Hi,

I have inserted the code and video’s on my server. Everything seems to work except for the Flash Player.
I want the Flash video player to AUTOPLAY like the HTML5 players do.

Is this something I need to edit in the source code of the plugin?

Stef

Pavel Soukenik, February 19, 2010:

Unfortunately, the Flash video player I’m using (see the link to Google code site in the article) does not support auto-play (as opposed to the audio Flash player). It was supposed to be added. I am not familiar with Flash so I cannot implement this myself.

Stefan Segers, February 19, 2010:

Hi Pavel,

Thanks for the reply. Isn’t there another player that I can embed that will support autoplay?

Stef

Pavel Soukenik, February 19, 2010:

Not really. I could try to find some light-weight alternative, or I could try to change the code to start the playback using JavaScript.

Stefan Segers, February 20, 2010:

what can be the easiest way? JS? If I can help you out, please tell me.

Stef

Pavel Soukenik, February 20, 2010:

I’m sending you an email.

Odin / Vemont, February 22, 2010:

Huh? OGV should work!

I guess it does. You should anyway check for it in the plugin, as it’s the preferred extension AFAIK :-)

Pavel Soukenik, February 23, 2010:

Thank you! I will fix this in the next release.

Pavel Soukenik, February 25, 2010:

Version 1.8.0 is now available for download from this site.

David, February 26, 2010:

Just updated to the latest version, and html5 player shows up in Chrome, but doesnt play. Not sure why.

Pavel Soukenik, February 27, 2010:

Hi David, can you post/email the text of the shortcode and a link to the page?

Tim Noonan, February 28, 2010:

Hi,

I use JAWS a screen reader for people who are blind, and I’m using IE8.

I wanted to let you know that the audio player options on this site are not presented to my speech software, probably due to the flash player being degraded to.

I’d recommend considering switching the degradation behaviour over to the awesome WPAudio WordPress plugin, which is very accessible, and which will itself further degrade to simple download of the audio file if necessary.

You can try out the WPAudio plugin here on my site http://www.vocalbranding.com.au/the-human-voice-is-the-most-influential-sound-on-the-planet

Hope this helps
Tim

Pavel Soukenik, February 28, 2010:

Thank you for the suggestion Tim. The degradation I use also goes all the way to the text but not for users with Flash and the screen reader. I understand the concern and I will address this in the next version. (Likely in the form of an option to display the download links below the video/audio.)

David, March 2, 2010:

I cannot seem to get this working with the sermon browser plugin. I modified the php so the shortcode gets printed on the site like [audio src="http://www.lbcpb.org/teachings?show&file_name=2010-02-28.mp3" format="mp3"]. When I activate the plugin I thought that would be replaced by the player, but it is not. I would love to get this working so iPhone users can also listen to the sermons directly on the site. The original sermon browser code was using [audio:http://www.lbcpb.org/teachings?show&file_name=2010-02-28.mp3 which appears to insert this plugin, but then it says File Not Found when clicking the play button.

Pavel Soukenik, March 3, 2010:

Does it work for you when you change the link as follows? [audio src="http://www.lbcpb.org/media/2010-02-28" format="mp3"] I tried linking to this file from my site with this code and it worked. (The ‘.mp3′ bit may or may not be there, but the thing that apparently makes it fail for you is referencing the file through ‘?show&file_name=xyz’.)

Ben, March 4, 2010:

@Shazron;
“Awesome plugin – just reporting an OS quirk:

When I set the poster attribute for video, on Leopard h.264 plays fine under Safari 4.0.3.

However on Snow Leopard with Safari 4.0.3, when the poster attribute is set, playing h.264 only shows the poster, and the video cannot be played.

My guess is this is a quirk with Quicktime Player X.”

I noticed the same thing. Drove me crazy trying to figure out what was going on.

Pavel Soukenik, March 5, 2010:

Unfortunately, I don’t have a Mac to verify but this indeed seams like an OSX bug. Can you report it somewhere?

David, March 8, 2010:

Hi,

I’m trying to use your (wonderful!) plugin to add video to my blog. If I supply only the h264 .m4v version of a video, it works like a charm in Chrome/Safari, but doesn’t work at all in FF (i.e., doesn’t even fall back to Flash or provide a direct download link.)

My shortcode is simply: [video src='http://wp-sandbox.wanderingjew.net/wp-content/uploads/2010/03/cockroach']

Any suggestions?

Thanks a lot!

Flo, March 8, 2010:

hi,
I have my video in flv and ogv, and would like to have the ogv played first, and onyl if that’s not possible play the flv file.

do I need to write then format=”ogv flv” in the video tag?

Pavel Soukenik, March 8, 2010:

@David, this should definitely work. I’ll email you to investigate a bit more.
@Flo, ogg/m4v has a priority in HTML5 playback. Only fallback Flash prioritizes the optional flv. The thinking behind this is: Nobody is going to create flv movies now so if an flv is supplied, it is probably the original quality file. The reason it does not work for you is that you must provide an m4v version at the moment. See the FAQ.

Adam, March 8, 2010:

Hey – great plugin. I’ve spent a bunch of time today learning about HTML5 compatibility. Anyway…I don’t know why my ogg/ogv file isn’t working in FF. If I don’t upload an ogv file, it falls back to the flash player fine…but if I do upload an ogv file…I just get an “X”.
Am I doing something wrong?

http://www.pplplanner.com/communication

I did modify the htaccess file per your suggestions too…

Pavel Soukenik, March 9, 2010:

Hi Adam, the good news for you is that it is actually working :-) The problem is that after updating the .htaccess, you need to clear the cache in Firefox. I need to update this in the instructions.

Robert, March 10, 2010:

I had a friend try to pull my site up today to see if his Android phone could play an mp3 using this plugin, and it didn’t display anything on the page. I know the Android browser is HTML5 compliant because it plays HTML5 YouTube videos. Does this plugin not recognize the user agent of the Android browser?

Mozilla/5.0 (Windows; U; Windows NT 6.0; en-US; rv:1.9.1.3) Gecko/20090824 Firefox/3.5.3 (.NET CLR 3.5.30729)

Stefan Segers, March 10, 2010:

I am still looking for a way to make the FLASH player in IE get an autoplay function. It works with SAFARI and other modern browsers but not with IE

Another thing is that when I do a autostart of my movie it takes a while to start playing (with empty cache on the mac)

Hope there will be some answers soon :D

Stef

Lewis, March 10, 2010:

Pavel
I cannot get the plugin to work in FF or IE; it works great in Safari. Here is the shortcode: [video src="http://reflectionschoir.com/wp-content/uploads/2010/03/Reflections-Concert-Choir-retry" format="ogg m4v" options="autoplay loop"]. The page that this is being tested on is http://reflectionschoir.com/video-test. I have added the entries to the .htaccess file as you suggested with no joy. Any help would be appreciated.
WordPress 2.9.2 (latest version) running on Linux server (Shared Hosting) plugin version 1.8.0.

John, March 22, 2010:

I would also like to see Android support. Current Droid useragent string is:

mozilla/5.0 (linux; u; android 2.0.1; en-us; droid build/esd56) applewebkit/ 530.17 (khtml, like gecko) version/4.0 mobile safari/530.17

Pavel Soukenik, March 30, 2010:

Sorry, I have been swamped with work lately.
@Robert and @John: I do nothing to enable or disable individual user agents, so if Android does not play then maybe it is not really using straight HTML5 video to play youtube. I will ask my friend with an Android phone to investigate this.
@Stefan, the autoplay only works for the audio flashback plugin. I have been chasing up the video player author to no avail so far. The pause before playback would be the time before the browser decides it has cached enough data (totally up to the browser).
@Lewis, I am following up with an email.

Robert, March 31, 2010:

After further research, the Android 2.0.1 browser does not support the HTML5 audio tag yet. However, the Degradable plugin should fallback to displaying a link to the mp3 file so the Android browser can still play the audio. Currently, it does not display anything at all where the audio would be when I view my post in the Android browser.

Jalopyhead, March 31, 2010:

I understand that autobuffer is the default, but how do you disable the autobuffer? I would like for it to start buffering only once a person clicks the play button. I plan to have a “video” page and it would be way to much bandwidth for myself as well as the enduser if every video starts autobuffering.

Thanks,
Jalopyhead

ae, April 1, 2010:

Two issues:

1. I could only get the audio player working on Chrome when next to a mp3 an ogg file is present. With appropriate format=”ogg mp3″ setting.

2. Why do the players in Chrome and FF look so different, they both are html5? Can the look be changed?

Thanks!

Pavel Soukenik, April 2, 2010:

Re 1) Can you send me more details what does not work through the Contact info page? Re 2) When you include the “controls” option (default setting), every browser provides its own user interface. You are free to tell the browser you don’t want these controls and provide your own UI (which would look the same across browsers).

Pavel Soukenik, April 2, 2010:

@Jalopyhead, you simply need to specify the options explicitly: [video src="clip" options="controls"] (This example will include the controls, but not autobuffer, autoplay and loop.)

Jalopyhead, April 4, 2010:

I did as you said, but it still seems to be preloading. The code that I have is:

[video src="http://blog.jalopyhead.com/wp-content/uploads/video/More_Chinese" options="controls"]

I’m not sure what the problem is. The video is a flv video.

Here’s the specific blog post. http://blog.jalopyhead.com/2010/03/30/china-day-im-more-chinese-than-you/

See if it preloads for you.

I appreciate your help.

Alex, April 4, 2010:

I have the exact same autobuffer issue as Jalopyhead – I have set options to controls only but the video are still preloading.

Great plugin by the way. Really useful and well thought out. Yours efforts much appreciated.

Jeremy, April 4, 2010:

So I’m a little baffled.

I’m only providing the M4V and I designated that in format part of the code. Chrome and Safari work beautifully but Firefox doesn’t. Nothing is displayed. In theory, because I don’t provide the Ogg Theora file, it should degrade to the flash player right?

Here’s the link:
http://clients.jeremybrunson.com/2010/04/03/my-reel/

It’s just the test area before I apply it to my actual blog.

Here’s the code:
[video src="http://clients.jeremybrunson.com/wp-content/media/StringingUpHusk" width="640" height="480" format="m4v"]

Pavel Soukenik, April 7, 2010:

@Alex, even without ‘autobuffer’, some browsers still cache (part) of the media. The option is unfortunately more of a guideline for the user agent than a law.

@Jeremy, Lewis, try the new version 1.8.1. Some servers had trouble with the fallback syntax.

Nicole Coleman, April 7, 2010:

Thank for the plugin. I would like to second Christiaan’s request for the ability to add a class attribute rather than just id. This will help greatly with styling.

Pavel Soukenik, April 7, 2010:

Thanks Nicole. Absolutely, I don’t know why I haven’t done that already. I’ll implement the class attributes tonight.

Jeremy Brunson, April 7, 2010:

Hi,

Thanks for the response! I upgraded to 1.8.1 and now I see the flash player! However, now I still have the black box with the X in it in Firefox. To recap, I’m not providing (or planning to provide) an OGG Theora file. I’m using format=”m4v”.

http://clients.jeremybrunson.com/2010/04/03/my-reel/

Thank you.

-Jeremy

Lewis, April 7, 2010:

Success the video is playing now!! So far in testing 1.8.1 in Firefox and IE it works almost as expected. Autoplay and loop options are not working. I have not changed the code, so what am I doing wrong? Is anyone else having the same problem? Or found a way to fix it?

Robert, April 7, 2010:

Just a heads up, the update still does not fix the fallback issue for Android browsers. Currently (Android OS 2.1), to play mp3′s from a website, you have to fallback to a direct link for the Android browser. I have temporarily added a fix into the audio_shortcode function of the PHP script.

Right before

return $output;

at the end of the function, add the line

if (strstr($_SERVER['HTTP_USER_AGENT'], ‘Android’)) $output = ‘Audio MP3‘;

Scott, April 8, 2010:

The new 1.8.1 update won’t work on my site and the old 1.8 worked but displayed the flash player instead of the html5 on chrome and FF using the same .m4v file.

http://www.jobhuntacrossamerica.com/2010/04/the-ozarks-sentinel-interview/

Pavel Soukenik, April 9, 2010:

@Jeremy, @Scott, when I access your links, everything seems to work fine. Send me an email if there are still problems.
@Robert, addressing Android was not part of the fix. Unless they support HTML5 properly, I will have to look into some workaround in the future.

DibS, April 12, 2010:

+1 for playlist support.

Dave, April 12, 2010:

I am wondering if you have found a way to take mp4 h.264 and convert it into m4v for iphone playback?

I am using Jing Pro and it creates mp4 files. I wish it did m4v.

Ben, April 13, 2010:

Greetings,

Any chance you could remove the dependency on the wp-content folder? This breaks in WPMU where the default upload location for a blog is not /wp-content/file, but instead is /files/%year%/%month%/file. I’m using the format attribute, but it still gets the link wrong (shown by right-clicking the black flash player and selecting “Download Video”).

In the meantime, I’ve edited the php file on lines 104, 105 & 121 to remove the references to the WP_CONTENT_DIR and substituted the $src variable.

Thanks for an awesome plugin!

Ben

Guillaume Duhec, April 14, 2010:

Hi !
First of all, i have to thank you for this great great plugin !
It works pretty well, but i’ve got some issue with FF, actually with the fallback system, when i’m not on the root of the domain…
i.e. in my testing environnement, i use one server and then folders to keep projects seperated. So the locations are like : http://localhost:8888/someproject/wp-content/uploads/somefile.m4v.
In Safari,iPhone, no problem as the file take directly the location.
But it seems that when it use the fallback, in FF for example, the flash player is searching for the file (flv or m4v, depending on setting) in http://localhost:8888/wp-content/uploads/somefile.m4v. So it finds nothing and never play…
Do you have an idea for this ?
Thx again.
Guillaume

Brian, April 14, 2010:

I have multiple WordPress blogs under the same domain, and so the URL to my wp-content directory does not appear to work with your PHP code. E.g. my uploaded mp4 file “http://www.mydomain.com/blogA/wp-content/uploads/2010/04/MVI_4651.m4v” seems to be turned into http://www.mydomain.com/wp-content/uploads/2010/04/MVI_4651.m4v (which does not exist). I tried to hack this line if (substr($src, 0, 4)!=’http’) $filename = WP_CONTENT_DIR . substr($src, strlen(WP_CONTENT_DIR)-strrpos(WP_CONTENT_DIR, ‘/’)); to manually insert the subdirectory (blogA in url above) – but I wasn’t successful. Any thoughts?

Jim Edwards, April 15, 2010:

Hey thanks, We are a large church that has 12 different sermons on any given weekend. I’ve been wanting to ditch flash for some time… You’ve given me a great way to post the audio via HTML5 and still have a fallback method for IE/FF….

flo, April 16, 2010:

hi,
there seems to be a problem if the wordpres installation is in another directory.

in the line 121:
where it puts the file path in:

$plpath.’?file=

for me, there is my “cms” path missing, and so it can’t find the file.
in the video shortcode: [video src=….. I have it right, I checked.

flo, April 16, 2010:

and I have one other question, I have my files as ogg and flv, but in all browser I get the flv not the ogg embed. shouldn’t be the ogg file the first choice?

Jeremy, April 16, 2010:

OK. I fixed my problem. I’m not entirely sure what was causing it but it’s gone now and I’m using your plugin on my site! Thanks!

If I were to make a suggestion to how to improve the plugin for future versions, it would be to handle the whole autobuffer problem. John Gruber outlined the general problem with this on Daring Firebell back in December: http://daringfireball.net/2009/12/html5_video_unusable

He, and a couple of others, came up with a javascript to kind of skirt around it. You can check out the page and it’s source here: http://daringfireball.net/misc/2009/12/user_guide_demos

Autobuffer doesn’t really bother me that much but I would like actual control over it. I hope the browsers implement this or the spec changes so it’s always respected.

But fantastic job on the plugin and thanks for the help. Do you take donations or anything?

Karl, April 17, 2010:

Hi Pavel –

First off, many thanks for creating this plug. A great way to help my site transition to HTML5 playback.

Question – is there a way to disable the download link for cases where the browser doesn’t have HTML5 OR Flash?
For music sites, it’s nice to offer playback previews without also ‘forcing’ the site to provide free downloads too.

(We DO want to give tracks away, but usually we’d like to trade an email or something for the download – this plugin right now takes that control away from us).

Ideally, we could specify a sample mp3/ogg file for download, which might be different than the full-length playback track.

But if this is hard, we’d like to be able to shut off the plugin download option and just hand-code a link for a short mp3 preview download next to the player.

What do you think?

Again, congrats and thank you!

Oh, you might warn folks about the problems if one stupidly sets all the player IDs the same. I did that and of course – only one player appeared. ;)

Thanks!

Karl

Karl, April 17, 2010:

Oh, one other question / request –

is it possible to hand-specify a song title? I know this is possible in the Flash WP Audio Player, using the Titles=”something” syntax, but I am wondering if HTML5 allows this.

Also, can we ‘get back’ the ability to specify title at least for Flash player use?

Thanks!

- Karl

Pavel Soukenik, April 18, 2010:

Thanks for all the recent comments and suggestions (on the folder locations etc.)! My work has kept me from updating the plugin but I’ll try to address all these areas ASAP.

Saulo Benigno, April 24, 2010:

Hello, I posted some errors on the WordPress forum, but let me post here too ;)

1) Does not work right on Opera 10.5

Check this link on Opera 10.5

http://www.avault.com/news/podcast-news/chris-avellone-podcast-episode-75/

The page after load stops working. Mouse scroll stops, buttons/links are unclickable, basically nothing works.

2) Default code is not working

The default code is not working for me:

[audio:your_mp3_file.mp3]

All my links are in this format.
But all my mp3 files are on another server, I trying add the ‘format’ tag but does not work.

How can I fix it?

3) Support for ‘titles’ tags would be nice ;)

Thanks for the plugin, sorry for the big post.

Saulo Benigno, April 24, 2010:

Is it only me, but on Safari the ‘play’ buttons appears like pause and to pause it’s the ‘play’ button.

This is from Safari itself, right?

David Rysdam, April 24, 2010:

Awesome plugin, thanks! (Although I’m a little worried about overrunning my transfer limits hosting my own videos…)

Ikedi, April 29, 2010:

Great tool im going to try this out on my wesbite thank you

roy, May 4, 2010:

Great plugin! I’m testing out the cool new API in WordPress 3 Beta 1 – can’t get the plugin to show the video (just get the short tag echo’ed), anyone else tried?

Guillaume Duhec, May 6, 2010:

Pavel, the new file location system seems to work well, anyway i’ve had installed some virtual host on my mac to get through this.
thx for your great job on this plugin !

Edward, May 9, 2010:

I am trying to use this with Amazon S3. The URL for S3 contain an ID and Security Code. Any suggestions?

Opera, May 11, 2010:

Why not include Opera in your comparison table? Opera supports Ogg.

Charlie, May 16, 2010:

I’m wondering if you could guide me to some info on how I might be able to customize the look of this audio player to better match the look of my site? It works great and I’d love to make it blend in.

Thanks

don, May 16, 2010:

Pavel, great plugin! I saw the comments above related to not being able to turn the autobuffer off. Is there anyway to address this? When I use IE8, it buffers the entire video before the controls show up. If you have 5 posts with videos on them, they all buffer simultaneously. Is there anyway to override this behavior on IE? I know you said the browser will use this as it sees fit, but other flash players (like JW Player using FLV Player plugin) can show the controls and then buffer once the control is clicked. Of course, that plugin will only play FLV in Flash. I love THIS plugin but without being able to control the autobuffer option, it will cause much frustration for users of IE that visit my site. Thanks, Pavel.

Terrill Thompson, May 26, 2010:

Regarding all the reports of autobuffer problems, autobuffer is no longer part of the HTML5 spec, which may have something to do with browsers varying in their support for it. It should be replaced with the preload attribute: http://www.w3.org/TR/html5/video.html#audio

Also, if I’m adding audio to my blog and I upload an MP3 only (no OGG file), the plug-in adds the same id twice (in my case, id=”f-html5audio-0″), which fails HTML5 validation.

Saulo Benigno, May 29, 2010:

Yeah, I’m with the same autobuffer problem :(

I hope that’s possible to fix it

Jerry, June 1, 2010:

WP 2.9.2 and your plugin 1.8.2.
I added a video here:
http://explore.globalcreations.com/places/usa/klamathbasin/south-klamath-hills/
using this syntax:
[video src="http://globalcreations.com/explore/video/SouthKlamathHills" width="320" height="240" options="controls autobuffer" format="m4v" id="vid-1"]
with ONLY the m4v version which is located at http://explore.globalcreations.com/video/.

It works fine in Safari. With Firefox, I get the audio, but no video. What did I do wrong?

Jerry, June 1, 2010:

I created an ‘ogg’ version and it now plays properly with Firefox. See:
http://explore.globalcreations.com/places/usa/klamathbasin/south-klamath-hills/
Thanks for a very handy plugin!

niels, June 1, 2010:

@Ben:

How exactly did you change things for WPMU? I’m running into the same issue – things don’t load because the wp-content structure is different under WPMU.

Nooidea, June 5, 2010:

Thanks very much for this briliant plug-in

so coool!

JMS, June 6, 2010:

Great plugin! Quick question–this is working great on the iPad, but having trouble with it on the iPhone. I get a Quicktime player box with a slash through the play button. Any ideas? I’ve tried setting the dimensions, but that didn’t seem to change anything, and I can’t find any info out there by Googling. All suggestions appreciated. Thanks!

Peter, June 15, 2010:

That’s a great plugin! Thank you much. how can I change the color of the player? Is it only black?

PJ Gray, June 17, 2010:

Can’t seem to get this to play my radio show mp3′s using an iPad. The player works fine in firefox on my Mac, but in the iPad I just get a black bar with ‘Cannot play audio file’. Any ideas?

Bird Yoshi, June 19, 2010:

Wow. So simple. Works as sold. Amazing. I’m using it on WP 3.0 with only one problem – Flash not working in IE, but I’m fine with serving the files as WAV in the Windows Media Player.

So many fallbacks and chances, with so little code. Fantastic.

Lewis Palmer, June 25, 2010:

Ltest version of the plugin is broken. None of the videos that used to be playable are no longer. Will you please provide me with the 1.6 version of the player? Thanks.

WordPress 3.0
DHTML5 Plugin 1.8.x

Ali Hussain, July 1, 2010:

Hello Friend.

I really love your plugin. I would like to ask you why aren’t the controls being showed for the video i.e. volume/pause and if available full screen.

Image link:
http://i49.tinypic.com/11llq48.jpg

thankyou for the support

Matt, July 6, 2010:

Great plugin!

One question: The flash version of the player displays “Track #1″ as the title of the track when it’s playing. How can I replace that with the title of the song? I thought it happened through the id=”" tag, but maybe I’m using it wrong. Any tips?

Thanks!

Craig, July 6, 2010:

Hi, i’m trying your plugin (v1.8.2) with wordpress 3.0
The player seems to incorrectly detect the video format and always try to load m4v, ignoring the format tag
I’m using firefox 3.6.6

[video src="wp-content/uploads/2010/07/dog_test.ogg" format="ogg"]

The page will always load the flash player with the URL of wp-content/uploads/2010/07/dog_test.m4v

if I use the flash player’s “download video” option it gives me a link to the file with m4v extension, if I use that same link and change extension to ogg the video will play fine using firefox’s html5 player

Cheers

TJ, July 9, 2010:

This is a wonderful plugin ! It would be perfect if you found a way to force the “autobuffer” to be disable… Anyway, keep up the good work !

Eric, July 10, 2010:

Hi, great plugin! However, I am having a hard time getting the video to work in Firefox. I converted my video to the theora .ogv file format and it still does not work. Any help would be appreciated.

xdreamwalker, July 13, 2010:

Just an fyi I have found a plugin conflict.

Embedded Video – http://wordpress.org/extend/plugins/embedded-video-with-link/

Aaron Snyder, July 13, 2010:

Hey – I have both the m4v and ogv file uploaded. For some reason both in firefox and safari your plugin defaults to using the flash player not the HTML5. I updated my .htaccess file as you suggested. Still nothing. Any recommendations?

andrea, July 13, 2010:

I noticed that you had a workaround to play mp3s on android browsers – is there a workaround available for video? I’m running wordpress 3.0, have provided an .m4v and .flv file, and am using this code to display the video:

[video src="http://andreahinkle.com/wp-content/uploads/2010/07/hinkle" width="720" height="480" options="controls autoplay"]

Onur Yaşar, July 19, 2010:

OK, this plugin is incredible. the content also works on iphone.

but without the option to disable autobuffer, when someone opens your blog’s homepage, all audio and video of the first 10 posts start to autobuffer which is not pleasant. when i specifically set “options”, it still doesn’t work and eveything autobuffers.

kenzomus, July 19, 2010:

I tried it but no luck.
1.Download the plug in
2.Install it.
3.Went to souource code and write the following

[video src="http://www.mywebsite.com/public_html/wp-content/uploads/2010/07/Commercial_Senegal.m4v" poster="" width="320" height="240" options="autoplay" id="vid-1"]
4.Does not display in Firefox, IE, Chrome .
Am I missing something?
Will appreciate any help .
Thanks

bruce lawson, July 21, 2010:

Lovely plugin. Two requests:

1) please remove autobuffer and replace with preload (the spec has changed).

2) Can there be an option that makes the plugin insert links to the media files *below* the closing audio or video elements for browsers/ lower-specced mobi;e phones?

munchen, July 21, 2010:

Can i have the original fla audio plugin for change the colors?
thanks, great work!

Bob West, July 21, 2010:

Hi…

I’m in the same boat as Aaron Snyder.

After uploading m4v and flv versions, and adding the prescribed .htaccess directives, it works in Safari, but not in Firefox.

My client really wants to have a solution that works for iPad/iPhone plus as many other platforms as possible.

Any hints?

BTW– The URL above is my site, not the install site. That’s still private while under development.

Thanks…

WebCreationUK, July 23, 2010:

Awesome plugin! Gonna try it right now, thanks!

Heine Virenfeldt, July 24, 2010:

Great plugin, can javascript + swf be used as standalone on none wordpress sites?

am, July 27, 2010:

What is the way to add basic video controls (like bottom of quicktime)
I especially need the scrub bar
Any suggestions about how to implement with other exisiting plugins or code snippets would be
helpful. I don’t know where to start Thanks

am, July 28, 2010:

to be more articulate than last post…video m4vs are loading and playing great. But the video control I see is just a black band with a white tracker line. How can a get a least scrub drag bar function and even stop pause? Seems like examples have that so I must be doing something wrong?? Any help is appreciated

AlphaDog, July 29, 2010:

Soukie – great plugin!

Question: What is the pixel size (H & W) of the audio player? Is it the same for the video player?

Markus, August 3, 2010:

I have the same problem like Aaron Snyde (July 13, 2010). It works fine with version 1.4.2 but after upgrade to your last version 1.8.2 the html-5-videoplayer doesnt work and the flash-player starts.

Do you know something about this bug?

Greetings. Markus

elBarto, August 3, 2010:

For Safari video buffering, I am not too good for such, so I duno if this is a solution:
http://stackoverflow.com/questions/3284212/how-to-play-html5-video-without-using-autoplay-because-it-buffers-everything-and

Anyone?

Heff, August 3, 2010:

I’d love to get VideoJS worked into this. It has a lot of benefits over just using the built-in browser players (fixes bugs, compatibility issues, and adds additional features) Any desire to work together on that?

Benjamin Allison, August 4, 2010:

Hello! Great work on this… really stellar.

Just wondering if there’s anyway to load videos dynamically?

So, say I have a list of links, each of which is an m4v. Is there anyway to, when clicking a link, load the linked video into the player?

Thanks!

Joachim, August 8, 2010:

Great Audio Plugin! Thanks for sharing.
Joachim

Tom S., August 9, 2010:

Thank you VERY much for this plug-in! It is the only one I can find that degrades to HTML, which is vital in this day and age.

Any chance you might consider also porting it to Joomla? I would think it would be an easy port.

brandjunge, August 11, 2010:

hi,

like Onur Yaşar, i have the same problems. all of the videos are always beginning to load without userinteraction. in firefox (mac) with flash, in safari (mac) as html5 and also on my ipad. especially because this is a plugin for a blogging-software, i must say that the plugin is unusable for a blog.

when you have in every second posting a video embeded and when you read the blog on the overview-page (shown the last 10 postings), the users have to wait an awful amount of time to be able to view the videos. imagine a youtube-searchresult-site on which every video starts to load at the same time…

it is possible to handle this problem like youtube or the wp-plugin “Flash Video Player with HTML5″ (in this plugin the flash-videoplayer works not correct…arggh)? on ipad there is the big round playbutton in the middle of the videospace – and only when i press it, the video begins loading.

Jeremiah Fyffe, August 12, 2010:

I really like the simplicity of this plugin. It’s working great!

My only problem is I don’t care much for the look of the audio player.

Here is an example of how it looks on my site :: http://wp.me/pKYhw-gL

Here is my code :: [audio src="http://www.bibletogether.com/podcast/2010-08-12-Judges13-15-Psalm14" format="m4a mp3"]

I want it to look like the flash that are grey and you have to click them for it to start loading. And yet I still want it to work on the iPhone like this player.

Really, my main concern is I don’t want the browser to be bogged down by loading all of these audio files every time the front page is loaded.

Hopefully that is clear. Thanks a lot!

jimmmy, August 22, 2010:

Hello,
Your plugin looks great, but I can’t get the flash fallback to work.

This is my shortcode:[video src="http://www.mysite.com/wp-content/uploads/2010/08/VID00001"].

The video is m4v format.

I haven’t created the ogg version yet.

In Safari, Firefox, and Chrome, I can see the flash in the page source, but all i get is a black rectangle, no video.

Am i missing something?

Thanks,

Jimmy

Fabrizio, August 25, 2010:

Wow! And what about fullscreen mode? Tnx a lot for your work!

Andrea, August 25, 2010:

Has anyone solved the audio player issue with it displaying “Track #1″ instead of the proper song title when the Flash player is being used? I tried adding Title=”song title” to the short code and I tried playing around with the ID fields in itunes, but no luck.

Aside from being stumped by this, it’s a great plug-in!

Thanks!

darkfish, August 28, 2010:

Nice plugin
Please is there a way i can change the syntax for the plugin to [audio:example.mp3]

Speedy reply will be appreciated.

Erik, September 7, 2010:

is there a way to have the poster image displayed when the player is loaded or after playing

switching from the qt plugin which had this feature, but really like this plugin more

Traci, September 12, 2010:

Ok, I am new to this. Where do I put the source code for the plugin???

Jeff H, September 16, 2010:

Great plugin! I’ve got it installed and it’s working great.

I’ve configured it to display a .m4v file and the video plays, but I don’t get audio. If I play the file locally, the audio is there. The site I’m testing on is running on a Windows server with IIS7.

Josh Braun, September 17, 2010:

Installed and activated plugin
upload mp4 file to amazon
set proper permission (read everyone)

used the code snippet below
[video src="http://guitarcrunch.s3.amazonaws.com/xmlplayer/hd_videos/gcrunch.mp4"]

But get a black screen
http://www.jbraun.com/test-page/

Using WP 3.0

Jeff Hester, September 20, 2010:

I’m having a problem with this plugin. It works fine in Safari, FF and Chrome, but fails in IE. From what I can see looking at the generated HTML source, it’s not inserting the closing object tags.

Here’s the link: http://www.aryaka.com/technology/demo/

Any suggestions?

Greg Hodges, September 22, 2010:

I’m trying to get my video to play on an ipad or iphone. It seems as though if I upload an mp4, and use an mp4 as the src extension, the player is looking for an m4v extension. I actually couldn’t get it to work in chrome until I changed the video files extension to m4v. I think my ipad/iphone is having trouble with the m4v extension.
I see in the instructions that mp4 is not an available video format yet, further on there is instructions to add mp4 to the .htaccess file. Can this player recognize an mp4? Sorry for being so long winded.
Thanks in advance,
Greg Hodges

Greg Hodges, September 22, 2010:

I see Craig above posted on July 6th the exact problem I’m having. No matter what I use for an extension, the player still looks for m4v.

Thanks again,
Greg

Darko, October 3, 2010:

I’m trying to integrate the code into one of my page templates…so I was wondering if it is possible to insert as php code and not the shorcodes into the php template?
The reason I ask is because I want to have inside the URL of the mp3/ogg, so It can dynamically generate the correct URL and song.

Thanks in advance

ia, October 4, 2010:

I need to chime in on the auto buffer issue. Nice plugin, but it’s completely useless to us unless the autobuffer issue can be resolved. Our bandwidth would go up by a factor of 10.

K2, October 18, 2010:

I have a .flv and a .m4v video on my site. The m4v plays fine in Chrome, the .flv is good in Firefox as well, but in Safari on a Mac, the video isn’t shown. In the “Resources” tab of the developer pane, I see that it’s requested, but doesn’t get loaded. In Safari on my iPhone, I get a crossed out “Play” button. I’ve set the correct mime type for the m4v file, and I can’t figure out what I’m doing wrong.
Any idea on what the cause might be is well appreciated!

abel, October 18, 2010:

i really need your help

my file is alocated in the file manager of bluehost https://box653.bluehost.com:2083/viewer/home7%2fpetnewst/Going%20Green%20%40%20Backer%201.MPG

and i need to be able to play it in worpress

can you tell me step by step instructions

i really appreciate your help!

gESBENst, October 20, 2010:

The player won’t loop in FF. Works fine in chrome and safari.

http://www.branches.dk/test/?portfolio=keysoft

Any ideas?

JERRELL LEWIS, October 20, 2010:

I’m new to the process of entering short code. I need to know where exactly within the wp directory I should input audio short code. Thank you.

Andre Rombauts, October 25, 2010:

Works great. Just follow instructions… But would like to be able to use other flash players for degradable actions.

Richard, October 28, 2010:

In Internet Explorer the the flash is loading but the poster frame and controls are missing. what gives?

Plus the sound track briefly makes a noise then stops, waiting to play properly when clicking the play icon in the middle of the black frame that should be the poster frame. . .

http://capitalmetalsgroup.com/

help please

Peter, November 1, 2010:

First, I love the plugin! Is it possible to create playlists for audio?

Dallas, November 7, 2010:

I am using this to place a video as a header on a site. Works great in desktop browsers, however I am looking for a way to override the video with a jpeg poster when a mobile browser is detected. Is there a way to do this? Thanks!

reason I want to do this is since the video is a header I do not want the user to have to hit the play button that is automatically generated by the mobile browsers.

Dallas, November 7, 2010:

Also, is there a way to make firefox autoplay videos?

G Andersen, November 10, 2010:

Could you make a button in the Visual Editor, that works similar to links? So that journalists can just click the button, then type in the filename, or choose the uploaded file and then the code will be written on it’s own? Not all users are comfortable with writing code, even when it’s as simple as this.

Scott, November 12, 2010:

Great plugin thanks!

It was working fine but now vids wont play on my ipod..

the code i have on my page is

[video src="http://bluesfest.tv/wp-content/uploads/2010/11/10cc-plus-iv-H.264-for-iPad-and-iPhone-4.m4v" width="720" height="480" options="controls" id="vid-1" format="auto"]

thanks heaps..

Dimitrios Diamantaras, November 20, 2010:

Is there a counter for how many times a media file was played? Thanks

Peter, November 24, 2010:

I love the plugin, thanks! I have a problem though, it doesn’ t work with RockMelt (http://www.rockmelt.com/) that is based on the latest chrome release (it works in chrome). Do you think the problem is with RockMelt or is it some kind of fix that you can do in the plugin?

Pavel Soukenik, November 27, 2010:

Hello and huge apologies for being inactive for so long. My private and professional lives did not allow me to even moderate and respond to comments on this blog and plugin.

Thank you for all the support and suggestions. I will be now thinking whether it makes sense to revisit this plugin — recent months saw a huge uptake of HTML5 across browsers and I feel the plugin is very close to becoming obsolete.

I will also try to at least reply to questions and error reports. Again, apologies for the long gap!

synessence, November 27, 2010:

Is there a means of getting the player to play icecast/nicecast streams? It would seem somehow possible as the stream itself is an mp3 but I can’t get the plugin to recognize the ‘listen.m3u’ stream file.

Any thoughts?

synessence, November 29, 2010:

So I have heard a rumor that HTML5 has no provision for parsing a stream or playlist. That doesn’t make sense to me, but can anyone cofirm this?

Scott, November 30, 2010:

Would it be possible to pass width as a option for the audio player?

If you use this in a sidebar and a post it would be useful to specify width for the sidebar as a smaller size than the width you could use for a post.

Im currently forced to use the global setting as specified in add_audioplayer_header().

Thanks

Erdem, December 4, 2010:

Hi!
I think its a great plugin… I saw it on Bills Blog… and checked it on my iphone and looks fine, BUT it doesnt work on my blog. the situation is:

- I installed the modified version, because I’m using viper plugin. so i use the alternative tag html5video=

- I didn’t change the .htacces file for two reasons – first: i dont know how to open it, second: i dont know in which line i’ve to put the commands

- i have a lot of ressource available to convert the files (using finalcut pro and express, Quicktime Pro, mpegstreamclip, handbrake… but which one is the favourite?

- do i have to convert the file only into m4v, or ogg, or both? and how can i export the files into ogg? (i tried everything =(

- I just get a white area with safari, firefox doesnt show anything.

it would be awsome if someone could help me! pliiis =)

website designers, December 7, 2010:

If you could provide an indication with a counter for how many times the media has been played that would be excellent. Thank you.

helmut, December 18, 2010:

I think it to be a useful extension and I really would like to use it on my WP-Blog. Unfortunately the duplicate IDs causes HTML-Errors I can not correct. Do you have maybe a suggestion?

Toufiq, January 11, 2011:

i want to use the song in my widget, what will be the code, The code of blog not work on widget.

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.

Stoottaftdede, February 24, 2012:

Hi I bought an ipod touch as well wanted to keep you tube movies on my ipod. I have tried videora but it only says file forbidden on what i do my best to load.
Also whats greatest to convert films as well as dvds for my ipod touch , also i dont mind paying and what do i require for dvds to cut the encrytion as i need any.
download youtube to ipod, i have known it is it any excellent or can u introduce another 1
thank you

Trackbacks/Pingbacks

Pingback: WordPress + HTML5 wideo | CoSTa's Family Page on February 4, 2010
Pingback: Degradable HTML5 Audio and Video | ByU4U on February 9, 2010
Pingback: Max High Five’s HTML5 - Play My Cards Right on February 11, 2010
Pingback: HTML5 and The Video Element on February 19, 2010
Pingback: Transition on April 18, 2010
Pingback: And He Blogs » HTML5 on April 24, 2010
Pingback: Digital Video » ACCS 2010 on May 11, 2010
Pingback: And He Blogs » Babe Ruth Test on June 25, 2010
Pingback: iPhone Screen Replacement | Patrick Moore on July 22, 2010
Pingback: Thursday Links | Programming Blog on July 24, 2010
Pingback: HTML5 Music Players on August 23, 2010
Pingback: 20 HTML5 Video Players & Tutorials | css-jquery on November 24, 2010
Pingback: Jackplug Web Design » HTML5 Video on December 3, 2010
Pingback: WP-Pugins: µAudio Player on December 17, 2010
Pingback: Html 5 Solution on December 29, 2010
Pingback: WordPress FAQ: Audio and Video | Wizpress.com on February 25, 2011
Pingback: WordPress FAQ: Audio and Video | Programming Blog on February 25, 2011

Your comment