MP3 fallback to Flash fails in Firefox and Opera.

[chris001]

Using the Joomla 1.5 plugin.

Want to play an MP3 on all browsers, with preference for the html5 player, and fallback to flash when the browser cannot natively play mp3 in its html5 player due to license cost issues (Firefox and Opera are most famous for this).

Working: Safari, IE9, and Chrome (the html5 player kicks in and plays the mp3).

Failing: Firefox and Opera.
Link to the page with this issue:
( http : // www . pagas... )

1. Firefox (latest version) does not show any player - just a blank space on the page. Viewing source, audio tag is there.

Why did MediaElement fail to load the flash player?? How do you fix it ??

2. Opera 11.61 (latest) is putting up the html5 player, but obviously, failing to play anything, because Opera will not play mp3 on html5, it requires flash to play mp3.

Why did MediaElement load the html5 player, and fail to recognize that this browser cannot play mp3 on html5?? Isn't MediaElement supposed to detect if the html5 player on a given browser cannot play the mp3 format, and just fallback (fallforward) to the flash player to play the mp3?? How to fix this ??

UPDATE: the original author says "You don't appear to have mediaelement.js installed."
mediaelement/mediaelement#409
I don't see mediaelement.js in your mediaelement joomla 1.5 plugin fodlers ?
Shouldn't it be?
Can you reproduce this issue on your Opera and Firefox ?
How to fix this issue ?

[phlbnks]

Hi,

As you worked out in your thread on the MEJS site - the JS is getting loaded.

I'll have a look at this asap - but it will be a couple of days I'm afraid before I can give it some time.

In the meantime - I'd recommend supplying a second audio format (OGG) if possible.

[chris001]

For this one page (5 files) I can supply the OGG format - but it's impractical as a general solution because there is over 320 files / 3.5GB of audio that would have to be supplied.

Firefox and Opera do indeed have the ability to play MP3 via Flash, which is supposed to be working as the fallback/fallforward.

I'm seeing john dyer's latest release is updated to 2.6.5 one month ago - 3 months newer that what we have here - what do you think about upgrading to the latest version and seeing if that solves it?

Apart from that, let me know if I can do something on my side to determine the cause of this problem - most likely javascript - in order to fix it, please.

[chris001]

Update: the plugin can't do OGG audio. Just MP3, MP4, and M4A.

[chris001]

Correction : For audio this plugin is supposed to support MPEG (mpeg-2 audio), MP3, and M4A (mpeg-4 audio).

[phlbnks]

I was just looking at what audio formats FF supports in the HTML5 player - I'll probably add OGG to the plugin.

[chris001]

I tried adding M4A files to the page - the joomla plugin on both Opera and Firefox fails play the m4a's.

I'm seeing the player appear on the page.

You press the play button and it toggles to a pause button.

But the player doesn't show any buffering activity - it doesn't produce any sound - and the counter stays stuck on 0:00.. obviously not working..

[phlbnks]

That's right - M4A, like MP3, are not support for native playback in FF or Opera as they are not license free. The only formats supported for native playback in them are OGG or WAV.

I have just released an updated version based on the latest ME.js. Please try that and see if there is an improvement. I can confirm that the plugin definitely works with MP3.

Looking at your site - ME.js is not getting initialised. I have seen this on another site due to a conflict with another plugin. You could test this by temporarily disabling other plugins and seeing if that fixes it.
Alternatively, in your theme file, hardcode in a <script> tag at the bottom just before that calls the mediaelement-and-player.min.js.

[chris001]

Just a comment on the license.

To the best of my knowledge, M4A is free to use for audio files that are not sold for money - such as podcasts etc.

Only for sold audio - for example commercial music and video - is there a few cents fee - I don't know how much exactly - or a license fee built into the encoder software price.

But it's not charged at the decoder (end user/player) end. It's charged at the encoder end, from what I gather - (must double check this).

This is drastically different from MP3 - a 20 year old technology. Fraunhofer collects 2 cents per MP3 for MP3's distributed over 100,000 - no matter whether it was a freely distributed MP3 or not.

All internet audio and video has gradually moved from MP3 over to MP4/M4A over the last 10 years.

All this to say that - all modern web browsers, smart phones, and operating systems today support MP4 / M4A out of the box.

So, there isn't any licensing reason why either A) the plugin shouldn't let the broswer play the M4A audio directly in html5 , or B) the plugin should't let the user just fallback to flash (which plays M4A fine), or let the user download the M4A and play it in a helper application (windows media player, VLC which is free open source software, etc).

[chris001]

Looking at the source of my page, mediaelement-and-player.min.js is being included from your plugin folder.

Also, there is a snippet of JS, in the head, that calls the player to initialize it :
var $j = jQuery.noConflict();
$j(document).ready(function() {
$j("video,audio").mediaelementplayer({
startVolume: 0.85,
enableAutosize: true,
});
});

Should I still try to turn things off to see if that fixes it? Or can you look at the JS directly on my page with firebug?

Also, I have other plugins (a poll is one) that call jQuery noconflict, and possibly include jQuery also. Could that be it ?

[chris001]

Update : I installed and tested the new 2.6.5 version of the 1.5 plugin.

It's still failing to fallback to Flash, in Opera 11.61 and Firefox 11, even after upgrading to the 2.6.5 version.

Also, still failing to show the PbMediaEl span link: "If you cannot see the media above - download here: M4A" link - in both Opera and Firefox.

Let me know what we can do to troubleshoot this issue - clearly related to JS in the browser !

[phlbnks]

Hi,

On the licenses - your description may well be right, but some browsers (FF and Opera notably) have decided not to support MP3 / M4A (AAC / h264) formats as they deem them to not be license free. It is only the browser makers who can determine what will play natively, we can only add plugins to use/extend that. From memory the issues is that with M4A / h264 based formats, the license group reserves the right to start charging in the future, even though they don't now, and this is what makes them refuse to support it.

But back to the plugin - ME.js (and so this implementation) will always let the browser play the file on it's own if it can first as this has the lowest overheads, then only if it cannot play it, it will use the flash fall-back/forward to play it. When functioning without any problem, if the browser cannot play the file, and the flash player cannot (or isn't enabled), then you should see a download link - if all is working properly!

---

Ok, just read your new reply. I am working on v0.6 (a beta branch currently available now, and it SHOULD work fine, but at your own risk! I haven't tested it yet. I will be able to test it tomorrow hopefully - time permitting.) It will hopefully fix the download links not showing, and allow you to make them always visible if you want in the settings.

The main problem:
Are you happy editing your template's index.php? If so, and to get your audio functioning for everyone asap - try putting <script type="text/javascript" src="http://www.pagasleaseattorney.com/plugins/content/pb_mediael/mediaelement-and-player.min.js"></script> at the bottom of the page right before </body>. That 'should' get it up and running if this issue is the same one I've seen before. Meanwhile I am still working on the root cause. It is definitely to do with interaction with other elements / plugins - but something we should be able to get around.

Looking at your page it looks like the initialisation script (that you posted just above) is trying to call ME.js before it has fully loaded (it should already be loaded by then but isn't ready for some reason).

For now leave your other plugins - I don't want to mess with your site unless we can definitely confirm which other plugin is causing the problem and why. Better to code around it.

[chris001]

Update 2: Seems like the plugin is generating bad html on the audio tag:
(spaces added so it won't interpret into html!)
< audio width="220" height="25" controls="controls" preload="none"" >
See the 2 double quotes? preload="none""

I fixed it as follows, in pb_mediael.php:

// Poster image
if ($image_visibility == "true" || $image_visibility == "1") {
    $poster_html = ' poster="'.$image.'"';
} else {
    $poster_html = '';
}

// HTML output
$html = '<'.$media.' width="'.$width.'" height="'.$height.'" controls="controls"'.$autoplay_html.$preload_html.$loop_html.$poster_html.'>';

[phlbnks]

Thanks - well spotted! Sometimes browsers "ignoring" errors like that can be a pain when it lets a mistake slip through..

Unfortunately that shouldn't effect your problem. Short-term fix is still to edit your template's index.php, that should get it all running OK. Hopefully I'll be back with a proper solution soon.

If you're happy poking around in the php - have a look at the v0.6 branch of the plugin to see the change to make the download links always visible (if that's any use to you). Basically if you just change the span to p and move one live of code up a few lines you can have the download links always visible.
v0.6 proper will make them hidden by default, but shown if a user doesn't have javascript on, or if you specifically opt to have them shown all the time.

[chris001]

In reply to your most recent comment:

A) While I don't mind editing my template, I prefer an upgrade-safe solution that will withstand upgrades to the template, or switching templates - even thought it happens about once a month.

The plugin code should be able to either load itself on the page properly, or we ought to identify a badly behaving plugin that's messing up the calling of this document ready, or otherwise making the thing go wrong.

B) One thing I notice is: my page is loading many jquery support files :

2 different versions of jquery.min.js (1.7 and the newest 1.x),
1 copy of jquery-ui.min.js,
1 copy of jquery.form.min.js (for core joomla)
1 mediaelement-supplied jQuery no conflict code - one line of inline js ,
1 3rd party supplied (core joomla) jquery.noconflict.js which contains a line of JS to activate the no conflict mode of jquery,
1 place where mediaelement is attaching to the (document).ready(function() { ...
1 place where core joomla is attaching to the (document).ready( function($) { calls_a_function (); } )

Is the second attach to the (document).ready - overriding the first ??

How to overcome this without restoring to custom coding - ie manually combining them ??

There has to be a way to include multiple jquery objects on a page without having them clobber each other's global function overrides...

[chris001]

"v0.6 proper will make them hidden by default, but shown if a user doesn't have javascript on, or if you specifically opt to have them shown all the time."
OK so will it work like this? :
After the html5 player failing to accept the given file format -
Then the flash player -
Download links for those who don't have flash, AND for those whose javascript is turned off, AND when the global setting on the plugin is set to always show the download link.

[chris001]

Update

When I disabled that core joomla module, for this article category only, I got the page half-working in IE, Firefox (1), and Opera(1).

(1) In Firefox and Opera, (and for some audio files??) the plugin lets the user hit play, it buffers the entire file, then fails the play - you click Play and it immediately turns to a Pause icon (which is active while playing..), then back to a Play icon (which is active while stopped/paused).

A) So obviously the original issue I reported is/was due to a global-level js conflict with the other module which is using jquery.

1. Possibly due to loading 2 copies, and 2 versions, of jquery.
2. And/or due to 2 separate calls to noconflict.
3. And/or due to 2 separate overrides of the document.ready.

B) Can't tell if it's using the html5 player or the flash player - in IE, FF (which doenst work), and Opera. Just wondering.

C) Also not obvious whether it's using the mp3 or m4a file ? It's not obvious.

D) It'd be great to have a much briefer download link - in fact, 2 links, "Play in new window | Download". Similar to the powerpress plugin for wp. With a global default, and overrides on the per-file shortcodes. Play in new window onclick links to a javascript which generates the same html document code, with the same js and everything, in the new window, this allows people to browse around the site and still listen to the hour-long podcast playing in that other new window.

[chris001]

Figured out the unusual operation in Firefox and Opera problems, in my comment (1) just above.

Both FF and Opera were trying to play the m4a files, but incorrectly parsed them, and no sound came out. The m4a files were set in the plugin tags, for the first two audio files on the page.

When I removed reference to the m4a versions, replacing with the mp3 versions, suddenly both FF and Opera play all 5 audio files on the page now, correctly.

Would be awesome to have a new version of the plugin with the powerpress-style one line of text links below the player.

With global default settings, that you can override on the individual plugin tags - hide or show the text links.

Obviously, only the download links should appear , when both the flash and html5 players are unable to play the file.

[phlbnks]

The v0.6 branch now has customisable text links and the global show/hide option for them.
Planning to add a case by case show hide so setting the option for one file doesn't effect the rest.

I might have fixed the conflict you were seeing with some tweaks to the noConflict implementation - but I'm still working on it / testing.

I'll have a look at adding an open-in-new-window, but it's pretty low on my list to be honest as this is aimed at general embedded playback really and I want to fix these bugs first!

[chris001]

I'm about to test the new 0.6 branch.

Meanwhile, here is some working code for "hide player, play in popup, download", the standard links that typically go along with embedded podcast playback - nice to have global defaults, and per-file overrides.

http://podcasts.legacyrecordings.com/country/johnny-cash/johnny-cash-folsom-prison-part-1.html

[chris001]

One glitch. The "Text for download links" (the pre-filled default is "Download links:") is missing from the page.
It just shows, for example, in my case, the MP3 link.

It would be amazing if the text links would be similar to the player on the legacy recordings podcast link my previous post.

Hide player (toggles to "Play now" which unhides the player and starts playback) | Play in popup | Download: MP3

Probably it's open source so we could recycle the 2 javascript functions : 1 does the popup player, and 1 does the show/hide. It's the podpress WP plugin..

[chris001]

Strange bug on IE9 (html5 player?) : After finished playing the clip, the player buffers its entire clip again.

A huge waste of bandwidth especially for 3g mobile users who normally have relatively low monthly bandwidth caps, and expensive overage rates.

For example 3 of the big 4 mobile operators int the US are like this.

On Opera it works correctly : upon finishing the clip, the player remembers that the clip is fully loaded and simply shows the timeline as blue - meaning the clip is entirely buffered locally. No further network traffic.

[chris001]

Bug: the code "downloadlinks=[false]" doesn't work - the MP3 download link still appears, no matter what the setting is.
Only the global option works - and a look at the php source code confirms this.