Mobile Safari: аудио + манифест кеша

Хотел бы я сказать вам, что есть волшебная формула, позволяющая заставить все ваши html5-носители работать безупречно, но ее нет. Мобильная поддержка аудио / видео HTML5 сейчас очень слабая; намного дальше, чем его настольные предшественники. Что еще хуже, каждая из разных платформ обрабатывает это по-разному, и большинство из них поддерживают его только в полу-последних версиях.

Однако есть некоторые приемы, которые можно использовать для правильной работы мультимедийных файлов в мобильном Safari. Чтобы объяснить их, вам необходимо понять некоторые из его недостатков.

1) Вы не можете загрузить несколько аудио / видео файлов

По моему опыту, браузер загружает только один файл за раз. Если вы воспроизводите один файл, идите и воспроизводите другой, а затем вернитесь, и он просто загрузит этот файл заново. И хотя я сам не пробовал, я не верю, что манифест кеша вам здесь поможет.

Что мне нужно было сделать, так это объединить все мои аудиофайлы в один большой аудиофайл. Затем, в зависимости от того, какая звуковая дорожка была запрошена, я перемещал позицию воспроизведения в соответствующую начальную позицию и воспроизводил эту дорожку. Затем я бы использовал setInterval для проверки воспроизведения каждые несколько миллисекунд, чтобы определить, попадает ли текущая позиция воспроизведения в конец дорожки. Как только это произошло, я приостановил его. Плуис, я выделял себе несколько секунд (2-3) между каждой дорожкой, на случай, если ЦП телефона был под большой нагрузкой и проверял канал слишком поздно.

2) Вы не можете автоматически воспроизводить аудио / видео файлы

Apple встроила в свою технологию тегов мультимедиа HTML5 ограничение, согласно которому эти треки будут загружаться и воспроизводиться только в ответ на событие щелчка пользователя. Таким образом, разработчики не могли автоматически воспроизводить надоедливые треки, когда вы заходили на их веб-сайты.

Когда я использовал аудио / видео теги, я пытался создать мультимедийную рекламу. Поэтому я подключил загрузку аудио / треков к событию клика баннера, когда вы нажимаете баннер и расширяете рекламу.

Я бы посоветовал вам сделать так, чтобы появилось небольшое всплывающее окно лайтбокса, спрашивающее пользователя, хотят ли они включить / выключить звук. Вы можете прикрепить свои функции загрузки к событию щелчка этого всплывающего окна, независимо от того, включает ли пользователь звук или нет.

Лично мне не повезло с использованием функции load (). Я бы запустил эту функцию для загрузки звука, а затем нажал кнопку воспроизведения, и он просто загрузил бы его снова. Всегда могло быть так, что я просто делал это неправильно, так что не стесняйтесь доказать, что я ошибаюсь, и заставить это работать. Что я сделал, так это то, что я сказал треку воспроизвести, чтобы он начал загружаться, а затем я использовал setInterval, чтобы увидеть, увеличилось ли текущее время воспроизведения всего на несколько миллисекунд. Как только я заметил, что трек начал проигрывать, я сразу ставил его на паузу.

3) Аудио / видео теги поддерживаются только в iOS 4.0 и выше.

Нет никаких уловок, чтобы обойти это. Это просто факты.

Вот несколько сайтов, которые помогли мне, когда я разрабатывал аудио / видео теги:

http://www.w3.org/wiki/HTML/Elements/video
http://dev.w3.org/html5/spec-author-view/video.html#media-elements.

Удачи!