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 ).
  • Но контроллеры не появляются с Safari ( протестированы с последней версией на ПК, iPad и iPad mini ).
  • Аудиоплеер имеет серый фон с функцией «воспроизведение / пауза» .
  • Вот скриншот, который описывает мою проблему:

Образ

Благодарю.

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

Мое решение: я добавил полный 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> 

Это может показаться странным, но убедитесь, что ваша страница 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

Interesting Posts
Давайте будем гением компьютера.