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

Question

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

快变!看起来应该如此.

这是我的代码:

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 and none没有效果.

Answer 1

尝试用你的代码。使用库提供的默认mediaelementplayer.min.css样式。即使在手机上，它也能按预期工作。

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

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

ps 您是否尝试在所有其他样式表之后加载 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在手机上进行测试