Geek Answers Handbook

No buttons on the control panel - mediaelement.js

I downloaded all the MediaElement files in the source directories, but in the demos the video and sound playback are fine, but the Play, Volume and Full screen buttons do not appear on the control panel.

Any ideas what's wrong?

thanks

Matt

+4
source share
4 answers

I also ran into the same problem. Make sure you add the correct MIME types for SVG images to your server. If they are not there or they are not configured correctly, your browser will not display them.

I processed this via .htaccess:

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

If you still cannot get SVG images, you can always change the background images in CSS to use the .png version of the control panel and play the icons.

+9
source

After reading the first answer from spncr, I found no-svg classes in the MEjs stylesheet that used PNG files instead of SVG. I wrapped my audio element with a DIV using this 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>
+6
source

I had this problem, mainly because I was moving files, and CSS was looking for the wrong place for the control image file.

In mediaelementplayer.css

  .mejs-controls .mejs-button button { background: transparent url(controls.png) no-repeat; }

Make sure the background URL matches the actual location of the controls.png file.

+2
source

This is the code for the web.config file, which is used instead of the .htaccess file on the Windows server.

 <configuration> <system.webServer> <staticContent> <mimeMap fileExtension=".svg" mimeType="image/svg+xml" /> <mimeMap fileExtension=".svgz" mimeType="image/svg+xml" /> </staticContent> </system.webServer> </configuration>
0
source

More articles:


All Articles