MediaElement.js 音频播放器 - 移动设备上的有趣包装答案

【问题标题】：MediaElement.js Audio player - interesting wrapping on mobileMediaElement.js 音频播放器 - 移动设备上的有趣包装
【发布时间】：2017-07-22 19:08:23
【问题描述】：

如上图所示，我的音频播放器仅在移动设备上存在问题。当播放器加载时，它看起来像这样，但是当我点击播放时：

沙赞！它看起来应该如此。

这是我的代码：

HTML

<audio id="audioPlayer001" style="max-width:100%; width: 100%;">
     <source src="theFile.mp3" type="audio/mpeg">
</audio>

$('#audioPlayer001').mediaelementplayer();

我原本在audio标签里有preload参数，想着用它玩可能会更正，因为播放器只是在你点击PLAY之前摇摇晃晃，但没有这种运气auto, metadata and none没有效果。

【问题讨论】：

您在移动设备上使用了哪种浏览器？
在我看来，这是因为在你玩之前的白色条太大，无法容纳在黑色方块内。一旦你按下播放，栏就会意识到它并没有那么大，现在可以放入容器中。

标签： javascript jquery html audio mediaelement.js

【解决方案1】：

尝试使用您的代码。使用库提供的默认 mediaelementplayer.min.css 样式。即使在移动设备上，它也能按预期工作。

所以，为什么会发生这种情况的唯一解释可能是因为您覆盖了默认样式。

确保使用 !important 属性的样式表不会覆盖播放器的默认样式。使用网络开发者工具中的设备工具栏（ctrl+shift+M for Chrome）来检查正在应用的样式。

附言您是否尝试在最后加载 mediaelementplayer.min.css，即在所有其他样式表之后？也许如果您提供有关样式表/html 标记的更多信息，我可以更新我的答案。

这是一个有效的 sn-p：

 $('#audioPlayer001').mediaelementplayer();

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/mediaelement/3.2.4/mediaelementplayer.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mediaelement/3.2.4/mediaelement-and-player.min.js"></script>

<audio id="audioPlayer001" style="max-width:100%; width: 100%;">
    <source src="http://hcmaslov.d-real.sci-nnov.ru/public/mp3/Beatles/04%20Beatles%20for%20Sale/The%20Beatles%20-%20Beatles%20for%20Sale%20-%2001%20No%20Reply.mp3" type="audio/mpeg">
</audio>

您也可以通过链接http://www.niketpathak.com/app_external/test.html在手机上进行测试

【讨论】：

位于堆栈顺序的最底部。在该链接之后，它只是 Javascript 库。
我什至把链接放在所有的 javascript 引用之后，在你点击播放之前仍然是一个不稳定的布局。
好的，我更新了我的答案。使用设备工具栏时检查样式。
我一直使用设备工具栏来模拟我们内部没有的移动设备。另外我用它来检查响应和触摸事件。尽管如此，仍然没有关于风格的骰子。从第一天起，我就一直在监视我的开发人员工具中的样式选项卡。
由于建议的方法不起作用，并且没有人提供任何替代解决方案，我无法奖励赏金。