No buttons on control bar - mediaelement.js

Question

I have uploaded all of the MediaElement files, in the original directories, but in the Demos the videos and audio play fine but the Play, Volume and Full screen buttons are not visible on the control bar.

Any ideas what's wrong?

Thanks

Matt

Answer 1

I also ran into the same problem. Make sure you have added the correct MIME types for SVG images on your server. If they are not there, or if they are mis-configured, your browser will not display them.

I handled this through .htaccess:

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

If you still can't get the SVG images to appear, you can always change the background images in the CSS to use the .png versions of the control bar and play icons.

Answer 2

After reading the first answer from spncr, I found no-svg classes in the MEjs stylesheet that used the PNG files instead of SVG. I wrapped my audio element with a DIV using that class.

<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>