Html5 (аудио) в Safari и iOS

Я работаю над веб-приложением, и у меня есть одна проблема совместимости с устройствами Apple и Safari на ПК.

Html5 аудио тег:

<audio controls>
<source src="/audio/en/file.mp3" type="audio/mpeg">
<source src="/audio/en/file.ogg" type="audio/ogg">
Your browser does not support the audio element.
</audio>
  • Я просто хочу воспроизвести аудиофайл с основными элементами управления.
  • предыдущий код отлично работает на Chrome, Opera, Firefox (Windows & Android устройств).
  • но контролеры не появляются С сафари (проверено с последней версией на ПК, iPad & iPad mini).
  • аудиоплеер имеет серый фон с только функция "воспроизведение / пауза".
  • вот скриншот, который описывает мою проблему :

Image

спасибо.

9
audio compatibility html5 ios safari

2 ответов

У меня была точно такая же проблема.

мое решение: я добавил полный URL для источника аудиофайла. Не знаю почему, но это имеет значение. Вот мой полный код. Изменения CSS предназначены только для того, чтобы скрыть кнопку загрузки. Но когда я вынимаю его, я не вижу временной линии. Очень странно, но именно этот код работает для меня.

<!DOCTYPE html>
<html>
<head>
    <title>html5 audio player on iPhone</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
<style>
audio::-internal-media-controls-download-button {
    display:none;
}
audio::-webkit-media-controls-enclosure {
    overflow:hidden;
}
audio::-webkit-media-controls-panel {
    width: calc(100% + 33px);
}  
</style>
</head>
<body>
<audio controls preload="auto" style="width:100%;">
    <source src="https://example.com/audio/audiofile.mp3" type="audio/mpeg">
    Your browser does not support the audio element.
</audio><br />
</body>
</html>
4

это может показаться странным,но проверьте, что Ваша HTML-страница имеет в качестве первой строки. 

<!DOCTYPE html>
<html lang="en-US">
<head>
<title>My Page Title</title>
... and the rest of your page's code follows...

Safari, как известно, не отображает содержимое HTML-5 без надлежащего DOCTYPE.

Подробнее: http://www.wimpyplayer.com/docs/common/doctype.html

1