MediaElement not working in Firefox

I am seeing the same thing. Firefox on PC and Mac

Yup, same thing here. I'm getting a grey box with an 'x' in it (see attached screenshot). Firefox 3.6.13

updated to the latest release of mediaelement.js.. fixed the issue.

I actually supported someone on this not too long ago. There seemed to be a bug in the download for MediaElement (the version their website was using didn't have the bug). This should be fixed now. Can anyone else verify?

My webhost had turned off flash functionality due to malicious use from others. Once they turned it back on, MediaElement works fine everywhere. The tech guy could not explain why it only affected FireFox. I'm sorry, I didn't write down the exact setting that he changed.

I installed media element for the audio player. Works great in Chrome. But all I get is a black box in Safari and Firefox. I've checked versions, updated, updated flash and anything else I could update, including media element.js. I looked at generated code in the different browsers and realized that the divs for the controls aren't there in Safari and Firefox. These are missing:

Does anyone have any ideas? I don't know jQuery and so don't know how to insert them. I'd appreciate any insight...
thanks!

A-ha. For me the trick was to put the files in a build subfolder (in Libraries)

When I had the files in "Libraries/mediaelement/" i showed up in everything but Firefox (without fullscreen, though). When I moved it into a folder called "build" it all worked as a charm.

THANK YOU, ockley!!! I can see it in chrome, safari and opera...but now get a GREY box in firefox. I've attached a screenshot of what's in the build subfolder. Could you please look at it and see if I have what I should? I took the other folders that were in mediaelement along with build and put them into build... Thanks again! (I do have the Mar 7 version)

@cartagena Is there a url to the site with the problem. Your screenshot does not provide enough to troubleshoot.

Thank you, mfer--it's a test site: http://osbdev.lindasspace.org/test-0
It plays fine in Safari and Chrome, looks great in Opera but doesn't play and has changed from a black box to a grey one in Firefox...haven't tested yet in IE. I've looked at all the CSS and can't find any difference. Any suggestions would be greatly appreciated!

The problem is the mediaelement library is not available. Did you download and install it per the install instructions?

If you visit http://osbdev.lindasspace.org/sites/all/libraries/mediaelement/build/med... you get a page not found instead of the library. The browsers you see it in can natively play the audio that's why you see something there.

The mediaelements library had the "build" folder inside of it that had the players in it. After reading post #8 I took build out of the mediaelements folder and put everything in the build folder and eliminated mediaelements. The screenshot I posted in #9 is how it looks now. Can you tell me which of the elements in "build" I need to move back into a mediaelements folder? I don't know js but am trying to learn. I appreciate your help.

Head over to https://github.com/johndyer/mediaelement and download mediaelement. Take the file you get when you download it (it will contain folders like build, media, src, etc) and rename it to mediaelement. That's the mediaelement folder. You should not have to move files around.

Thanks, mfer--that's what I initially did--just redid it and now it is back to the black box on safari, firefox and opera... Thanks again, I really appreciate you looking at this.

I download the latest version of MediaElement but Firefox 4.0 can't play '.flv' files.

@jaza_sa If you are in a browser that doesn't support h.264 natively, doesn't have flash installed, and doesn't have silverlight installed you are pretty much out of luck to play video. If Firefox 4 can't play flash files its because its not installed.

Add an OGG file for HTML5 playback in Firefox.
Otherwise you need to add the code for fallback to flash in that browser.
Note that the audio file has to be an MP3 for the mediaelement flash player - MP4 doesn't work.

I am also having this problem.
Reading through this thread is it fair to say that the problem is to do with the webhost? I'd really love to have video compatibility across browsers so is there nothing I can do?

Thanks,
Paul

I am seeing this to, but do not belive this is related to my host, since I have full control.
I am seeing some odd mesages in the dev console error log like:

[17:53:02.093] $(this).mediaelementplayer is not a function 

after that each player on the page errors out saying:

[17:53:02.299] HTTP "Content-Type" of "audio/mpeg" is not supported. Load of media resource http://x.x.x.x/demo.mp3 failed. 

I am on Ubuntu 11.04 64 bit. works in chrome but not in firefox 12.0 For ubuntu Canonical 1.0

same issue here. IE works fine, but for firefox, it just stopped working one day. I update to the most recent version (2.8.2 I think), but no luck. It worked before and I didn't change anything. The things is the video in the mediaelements configuration works. So there must be a solution.

My content type uses the following:

Manage field:
Label: video
allowed file extension: mp4
field: file
widget type: file

Manage Display:
Mediaelement video

in admin/configuraiton/file type/manage file display:
video is set to Mediaelement Video

Any help is appreciated.

after some testing, the situation seems to be caused by the newest version of administrative menu 7.x-3.x-rc3. If I log in as administrator and load the admin menu, mediaelements does not work in firefox, if I logout and using non admin account, mediaelements works fine.

-- follow up on this: this isn't true anymore, I uninstalled admin menu but ff still doesn't work no matter what! IE8 is working fine, but not ff.

Hi there,
i'm using mediaelement 7.x-1.2 and it seems that Firefox doesn't like html5 tag so it uses Flash but when I load a local file (such as mp4) I only see a black box, while in IE and Chrome I can see the video's thumb under the play button.
How can I fix it?
Any help is appreciated.
Thanks

Same issue as #23: works in Chrome, but in Firefox 12.0 (latest version, on a Mac) we see a grey box saying: Video format or MIME type not supported.

Odd situation.

Changing line 240 of mediaelement/mediaelement.module from:
$output .= '<video ' . drupal_attributes($variables['attributes']) . ' ></video>';
to
$output .= '<video ' . drupal_attributes($variables['attributes']) . ' preload="true" ></video>';
worked for me.
Same thing for line 250.

Hope it helps!

The original poster jmsherry is correct. MP3 audio playback simply does not work in mediaelement 1.0 or 1.2 on Firefox.

I am running Firefox 13.0.1 on a Mac with Flash 11.3.3 installed and functioning. Although the player shows up on Safari, it does not show up for FF. I confirmed this issue on another Mac. I am using the very latest of the mediaelement.js 2.9.1 installed in my Libraries folder. I have tried simply renaming the download "johndyer-mediaelement-b090320" to "mediaelement" and placing THAT in my Libraries folder. I have also tried pulling out the "build" folder, namining THAT mediaelement and putting it in Libraries. Neither of these attempts worked.

I also tried a version of #25 for AUDIO and changed line 179 to:
$output .= '<audio ' . drupal_attributes($variables['attributes']) . ' preload="true" ></audio>';
That didn't work either.

I know mediaelement.js is capable of playing back audio because I see it working right there on the page for the javascript. But I suspect there is an issue with the paths to the player skins in the module. And that is why I changed the status of this to a bug.

I should also add that the player is missing in FF for admins as well as anon viewers so I do not see how it can be an issue with the admin menu.

I am experiencing this as well:

• Media 7.x-1.2
• MediaElement 7.x-1.2
• Firefox Mac: 14.0.1
• Subtheme of AdaptiveTheme 7.x-2.3

I'm using the audio mp3 player. The player appears for an instant, then it disappears. The player works fine in Safari.

Turning off Admin Menu didn't make any difference.

I also have the same issue
video works fine in chrome bt in mozilla it shows me No video with supported format or MIMe type found.

For me, the audio work fine in IE, Chrome, and Safari, but it doesn't work in FireFox browser. In FF there is just a gray box where the audio player should be.
TJM

Hello,

I have the same problems with firefox 14.0.1
with flash enabled the big black box bug .

Also in IE9 when modifying and inserting
i see all the controls play, pause, volume.

Return to the page viewing i don't see any control
but i can lauch my video with à right clic.

All that in wamp local installation.

If anyone have the solution .... :-)

I found my solution (video not playing in firefox) on a site
which I can not remember.
the author said he had to change one line in the file
mediaElement-and-player.min.js
replacing the line 44 $.each
by jQuery.each
in the libraries/mediaelement/build/ directory.

In first time i thought he didn't have the solution

First i wrote jquery.each
i had to write jQuery.each j in lowercase and Q in uppercase.

Thanks Firebugs who show me where was the error.($.each unknow)
sorry I can not remember the name of the author
of the solution but if you recognize yourself here reading these lines
a big thank you.

I correct the other $.each of all other script in the same directory.

Version: mediaelement.js 2.9.2 mediaelement module mediaelement-7.x-1.2
Firefox 14 , IE9

It seem to be a problem with the mp3 audio player mediaelement library (http://mediaelementjs.com/). Because if you go to mediaelementjs with FireFox 14.0.1 (current version of FF), you will notice that their audio player example does not function. The player is just a black rectangle above the words audio src="Air Review". However, the mp3 player works OK in other browsers, such as, IE and Chrome.

With Firefox 14 if I go to the link mediaelement.js
I have no problem reading

It reminds me that the first time
I did not make it right.
I did a file type (media)
and an associated view (video media element).
With IE I had no problem.
But with FF nothing worked.

What to do (what I did instead, there may be another way to do)) is:

1) create a field type (content type)

2) create the associated field of view (for Formatting)

Flash seems to need to encapsulate the code for
interpret it correctly.

With formatted output, FF does not have any problems
with flash and manage to stream content

Sorry for my poor english

Hi Azur29,
It is interesting that your FF is able to view the mp3 audio player on the mediaelementjs website with FireFox 14.0.1. With my FF 14.01. browser, it is just a black rectangle as seen with the attachment.
I am still working with your suggestions, but I am not quite there yet.
Thanks for all of your suggestions and input.

I'm almost sure that your problems are comming from
flash player.

if you go to http://www.adobe.com/software/flash/about/

you must have

if you have a black box try to réinstall flashPlayer in the same url.

return here to say what happens.

re: #31

It seems that there are a number of different Firefox-related issues for people on this thread, but this one is actually a bug in the MediaElement.js project itself - see this comment: http://drupal.org/node/1483578#comment-6253564

This bug is only brought to light when using MediaElement w/Drupal, because core's drupal.js file runs jQuery.noConflict(), removing the $ variable from the global scope.

Hi azur29 & tea.time,
I had this version of Flash on my Windows 7 Pro 64bit computer: install_flashplayer11x64ax_gtbt_aih.exe

Using my FireFox browser and going to the link: http://www.adobe.com/software/flash/about/ does not give a message indicating that Flash is missing or that it is the wrong version. However, I decided to re-download the Flash player with the FF browser at: http://get.adobe.com/flashplayer/
It downloaded the 32bit version with the folllowing file name: install_flashplayer11x32_mssd_aih.exe

Using this new Flashplayer 32bit with FF, I was able to see the audioplayer at mediaelementjs.com.
This is a big improvement. Now, I need to go back and make sure that Drupal 7 with mediaelement is OK.
I let you know the results...

Ok it's the comment i had seen before. So thanks gnoddep and you for that clarification.

rep#37 Good news !

Hi,
The mediaelement audioplayer is working OK now. I had to do one other step. I went into the Control Panel and uninstalled the old Flash player. After removing it, the Drupal 7 mediaelementjs player showed up in FF just the same as in IE, Chrome, and Safari. So, it is all working now.
Also, I am using the Eusonic version of mediaelementjs library per link:
http://drupal.org/node/1483578#comment-6253564
Best wishes...

Unfortunately, I'm continuing to experience this problem even with the newest fixes:

- Drupal 7.15
- MediaElement module 1.2
- MediaElement.js from Aug. 15 (includes eusonic's bug fix)
- Newest Adobe Flash for my platform (11.2.202.238, loads successfully on http://www.adobe.com/software/flash/about/)
- Firefox 13 on Ubuntu Linux

Just like #24, I see a flash of the player and then it's replaced by a grey box with the statement "Video format or MIME type not supported."

Is anyone else continuing to experience this problem even with the fixes to MediaElement.js?

I have the same problem on firefox, it's not possible to use this module.:/ I have to look for some alternative.

I also have this issue. Firebug in Firefox gives me the following warning: HTTP "Content-Type" of "audio/mpeg" is not supported. Load of media resource ... failed. I have jQuery 1.5.2 using the jQuery Update module.

I've exactly the same problem as fsSnowboard and same response from Firebug. We need a fix for this.

This is all due to Mozilla's steadfast belief that MP3 audio and MP4 video are not open enough standards. The refusal to include direct support for these important standards is part of the reason the market share for Firefox is on the decline while Chrome, Safari and various mobile browsers grow.

Source: Wikipedia - http://en.wikipedia.org/wiki/Usage_share_of_web_browsers

To me the best way to "fix" this is to encourage Firefox to "fix" their browser by changing their position on MP3 and MP4. I would encourage you to contact them and voice your opinion. Visit https://support.mozilla.org/en-US/kb/suggestion-box

Right. I'll just tell clients "sorry one of the major browsers doesn't work, but it's their fault, not mine!"

This is neither a fix nor a helpful suggestion. We need to accommodate all major browsers with this module, regardless of mcfilms' belief about their purity.

The bug remains and needs to be fixed. Unfortunately since it continued to be present in this module, I've moved on to other modules that didn't have the bug, but I'm hopeful this will get worked on and if I see attention to it from the module maintainers (rather than even more people confirming that this is an unfixed bug) I'll be happy to come back to it and help how I can.

*sigh*

What I posted is not my "belief" about the "purity" of Firefox. This is a position Mozilla has taken. Meanwhile, the maintainer has not addressed the issue in the module and no one has stepped up to supply a patch.

So "duh" of course move on to another solution. I switched to the MediaFront module months ago. I'm quite happy, thank you.

This section suggests one "Post A New Comment" not "Offer a Helpful Suggestion" or "Fix rootwork's issue." This is a forum and not every post is going to fix your particular issue.

It is my belief that if enough developers expressed frustration with this situation to Mozilla, they may change their position. But guess what? If you don't agree, and you feel that the "bug remains and needs to be fixed" then by all means fix it. Or carry on posting more confirmation that there is a bug.

mcfilms: Please read Drupal's guide to making an issue report (which covers responses to issues as well) and then come back.

If you want to file suggestions on what people might do to improve Firefox, by all means feel free to create new issues around it, although I think it might be a little outside the scope of this module. But the purpose of this issue thread is to fix the bug, not change the universe such that the bug no longer exists. Similarly, if there were an issue about Chrome/Safari not rendering a core Drupal theme correctly, a helpful post to that issue would NOT be to petition Chrome/Safari to render things better. Again, please read the guide if this isn't clear.

The only thing this issue thread, and any issue thread, is used for is discussing solutions or gathering evidence around a given issue report (in this case a bug). You are free to create your own issues on other topics, of course.

I'll give you the last word on this because I can see it's important to you.

There is an irony to cluttering up this thread arguing about the semantics of what I originally said. If you didn't find the information I provided useful to you, that's too bad. I have participated in a number of threads for contributed modules in which a problem was identified in core or another module. Members of the list were encouraged to contact the third-party developer. I fail to see how this is any different. You seem to think it is an egregious misuse of this forum. I disagree.

I was having trouble with a black box (essentially the player without controls) appearing in FF. I updated MediaElement to the latest version off of GitHub and it seems to work fine now... I didn't bother with any of the above patches, updating mediaelement was enough.

I updated MediaElement to the latest version off of GitHub and it seems to work fine now... I didn't bother with any of the above patches, updating mediaelement was enough.

How do you update it from GitHub? Do you install the entire package from there or just replace certain files in your Drupal installation?

I downloaded the zipball from HEAD: http://github.com/johndyer/mediaelement/zipball/master

Unzipped it, and put the "build" folder into the mediaelement folder in libraries...

Thank you! Will try.

#53 worked for me. Wasn't working in FF, just downloaded the latest mediaelement and its working now. I actually replaced the whole plugin, not just the build folder. Not sure that really matters or not.

doesnt work with the newest FF 20

I coded an inline Audio HTML5 tag and converted my mp3 to an ogg file and it worked in Firefox.

Seems like Firefox requires the preload parameter for audio tags. I fixed it by adding the following to my theme template.php.

function MYTHEME_preprocess_mediaelement_audio(&$variables) {
  if (!isset($variables['attributes']['preload'])) {
    $variables['attributes']['preload'] = 'none';
  }
}

On top of it I had this strange behaviour that it would work when I'm logged in, but not as an anonymous user.

This was solved by adding the following mime-types to the .htaccess:

AddType image/svg+xml svg
AddType image/svg+xml svgz

(Source)

Edit: it works for a while. It would work when logged in, the moment after being logged out, but after a refresh it's gone again.

Ok, I found the clue of what's going on in #59. It seems to be a cache issue.

When I enable "Cache pages for anonymous users" (admin/config/development/performance), the player works fine in Firefox.

Unfortunately I have a multilingual site that demands browser language negotiation, so I have to fall back to a tacky (yet working) solution by adding the following lines in .htaccess file on the root:

RewriteCond %{REQUEST_URI} ^/$
RewriteCond %{HTTP:Accept-Language} ^(bg|hr|sr|sl|hu|pt|es|en) [NC]
RewriteRule .* /%1 [L,R]

(Source)

Problem with this is that it works for all languages now, logged in or anonymous, except for the default language being English. On domain.com/en the mime-type error still remains for some reason.