控制栏上没有按钮 - mediaelement.js答案

【问题标题】：No buttons on control bar - mediaelement.js控制栏上没有按钮 - mediaelement.js
【发布时间】：2012-12-18 11:42:00
【问题描述】：

我已经上传了原始目录中的所有 MediaElement 文件，但在演示中，视频和音频播放正常，但控制栏上看不到播放、音量和全屏按钮。

有什么想法吗？

谢谢

马特

【问题讨论】：

有其他人遇到过这个问题吗？播放、音量和全屏按钮仍然可以使用，但没有可见的图标。演示和独立安装都是一样的。

标签： javascript jquery mediaelement.js

【解决方案1】：

我也遇到了同样的问题。确保您在服务器上为 SVG 图像添加了正确的 MIME 类型。如果它们不存在，或者配置错误，您的浏览器将不会显示它们。

我通过 .htaccess 处理了这个：

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

如果您仍然无法显示 SVG 图像，您可以随时更改 CSS 中的背景图像以使用 .png 版本的控制栏和播放图标。

【讨论】：

感谢 spncr 抽出宝贵时间来回答。非常感谢。这是由于未为 SVG 图像添加 MIME 类型。我已将这些更改为 CSS 中的 PNG 版本。

【解决方案2】：

在阅读 spncr 的第一个答案后，我在 MEjs 样式表中发现了使用 PNG 文件而不是 SVG 的 no-svg 类。我使用该类将我的音频元素包裹在一个 DIV 中。

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

【讨论】：

很棒的发现！添加 mime 类型对我不起作用……这是救命稻草。

【解决方案3】：

我遇到了这个问题，基本上是因为我移动了文件，而 CSS 在错误的位置查找控件图像文件。

在 mediaelementplayer.css 中

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

确保背景的 url 与 controls.png 文件的实际位置匹配。

【讨论】：

感谢 David 抽出宝贵时间回复。非常感谢。这是因为 MIME 类型尚未添加到 SVG 图像的服务器，所以我在 CSS 中将它们更改为 PNG 版本。

【解决方案4】：

这是用于代替 Windows 服务器上的 .htaccess 文件的 web.config 文件的代码。

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

【讨论】：