MediaElement.js Audio player - interesting wrapping on mobile

Question

As you can see from the above image, I have an issue with my audio player ONLY on mobile devices. When the player loads, it looks like this, but when I click PLAY:

SHAZAM! It looks as it should.

Here's my code:

HTML

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

JS

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

I originally had the preload parameter in the audio tags, thinking that playing with that may correct things, since the player is only wonky before you click PLAY, but no such luck auto, metadata and none have no effect.

Answer 1

Tried with your code. Used the default mediaelementplayer.min.css styling provided with the library. It works as expected, even on a mobile.

So, the only explanation as to why this occurs for you is probably because you are over-riding the default styling.

Ensure that your stylesheets using !important properties do not override the default styles of the player. Use the device toolbar (ctrl+shift+M for Chrome) in the web developer tools to check exactly what styles are being applied.

p.s. Did you try to load mediaelementplayer.min.css at the end i.e. after all other stylesheets? Perhaps if you provide more information about your stylesheet/html markup, I could update my answer.

Here is a working snippet:

 $('#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>

You could also test this on your cellphone via the link http://www.niketpathak.com/app_external/test.html