I am not able to get the controls to show up in IE9 or latest version of Chrome v.24. Here is how to replicate.

  1. Set up a new drupal site version 7.18 and enable clean url's (not sure if that matters, but that is all I did)
  2. Install Libraries module 7.x-2.0
  3. Download mediaelement.js version 2.10.1 from http://github.com/johndyer/mediaelement/zipball/master and install in folder called mediaelement under sites/all/libraries, so that there are files at "sites/all/libraries/mediaelement/build"
  4. Enable libraries module
  5. Enable mediaelement module
  6. Go to http://site.com/admin/config/media/mediaelement and you cannot see the controls, the controls are there...you can click on play/fullscreen, etc..., you just cannot see the controls. The images do not seem to be showing up in Chrome or IE9. Seems to work fine in IE8 and IE7

In my development site, I set up a video content type and used the display options. All works fine and plays but I just cannot see the controls. When I enter the images from the build folder into the browser directly, they do show up. The console in chrome warns that Resource interpreted as Image but transferred with MIME type text/xml: "http://site.com/sites/all/libraries/mediaelement/build/bigplay.svg". AND Resource interpreted as Image but transferred with MIME type text/xml: "http://site.com/sites/all/libraries/mediaelement/build/controls.svg". in "http://site.com/misc/jquery.js?v=1.4.4" line 130.

When I go to http://planetsvg.com/tools/mime.php and enter in my SVG or go to the SVG directly in the browser at "site.com/sites/all/libraries/mediaelement/build/controls.svg", it does render it just fine in the browser.

Any ideas?

Comments

allenshorter’s picture

allenshorter CreditAttribution: allenshorter commented

While I am not crazy about hacking a library, my temporary fix is to just replace the mediaelementplayer.min.cs instances of ".svg" files with the ".png" counterpart. Only occurs twice in the CSS. Guess I could put the styles in my own stylesheet.

Not sure if this is an issue with the mediaelement.js files, this module, or jQuery in general.

OMD’s picture

OMD CreditAttribution: OMD commented

I'm having exactly the sample problem, everything works fine, but control images will not load.

knalstaaf’s picture

knalstaaf CreditAttribution: knalstaaf commented

A possible cause of the play button not being visible could be the fact that your hosting doesn't support the SVG-mime type.

You can easily solve this by adding the following lines in the .htaccess file on the root of your website:

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

(Source)

P.S.: Notice that it's possible that the actual play-triangle doesn't have a drop shadow like the circle around it. If your poster image is white on that very spot, then you won't see it obviously (white arrow on white background).

knalstaaf’s picture

knalstaaf CreditAttribution: knalstaaf commented
Issue summary: View changes
Priority: Critical » Normal
Status: Active » Closed (works as designed)
leilyrken’s picture

leilyrken CreditAttribution: leilyrken commented

I know this ticket is closed but I had same problem and adding MIME upport didn't resolve the problem. However there is a work around in mediaelementjs css by embedding the player in a div with the class "no-svg" and it will load the PNG images instead of SVG.

<div class="no-svg">
  <audio id="player1" controls>
    <source src="file.mp3" type="audio/mp3" >
    <p>This browser doesn't support audio.</p>
  </audio>
</div>

Credit to http://stackoverflow.com/questions/13932181/no-buttons-on-control-bar-me...