从上图可以看到，我的音频播放器仅在移动设备上有问题。当播放器加载时，它看起来像这样，但是当我单击“播放”时:
赞!看起来应该是正确的。
这是我的代码:
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无效。 最佳答案
尝试过您的代码。使用了库随附的默认mediaelementplayer.min.css样式。即使在移动设备上，它也能按预期工作。
因此，关于为什么发生这种情况的唯一解释可能是因为您要覆盖默认样式。
确保使用!important属性的样式表不会覆盖播放器的默认样式。使用网络开发人员工具中的设备工具栏(Chrome的ctrl+shift+M)来检查要应用的样式。
p.s.您是否尝试过在所有其他样式表的末尾加载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在手机上对此进行测试