javascript - MediaElement.js 音频播放器 - 有趣的移动包装

Question

从上图中可以看出，我的音频播放器仅在移动设备上存在问题。当播放器加载时，它看起来像这样，但是当我点击 PLAY 时:

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

这是我的代码:

HTML

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

JS

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

我最初在音频标签中有 preload 参数，认为播放它可能会纠正问题，因为播放器只是在您单击 PLAY 之前不稳定，但没有这样的运气 auto，metadata 和 none没有影响。

Answer 1

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

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

确保使用 !important 属性的样式表不会覆盖播放器的默认样式。使用网络开发人员工具中的设备工具栏(对于 Chrome，ctrl+shift+M)可以准确检查应用了哪些样式。

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

这是一个工作片段:

 $('#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 在您的手机上进行测试