Совместимость медиа с iPhone/iPad

Так случилось, что мой сайт на LS внезапно погиб (умерший raid5 редкая штука, но бывает) и поэтому приходится восстанавливать все заново. Версия 0.4 не завелась со старой базой, поэтому старый добрый 0.31, однако уверен что все это можно прикрутить и к последней версии.

Одной из самых востребованных фич является загрузка картинок и медиа, но то, как я ее реализовывал ранее мне уже не нравится. Несомненно, uppod хорош, но никто не отменял iPhone и прочее, где этого самого флеша нету. Как вариант — вместе с плеером вставлять и текстовую ссылку, но это не наш метод.

Итак, вот как это я сделал сейчас: демо.

Использованы:

1. MediaBoxAdvanced, для того чтобы что-то открывалось с использованием этой универсальнейшей штуки сделан специальный тег
<magic src="ссылка">название ссылки</magic>
Туда можно смело пихать что угодно — ссылку на ютуб-видео, на картинки, на mp3/mp4/flv файлы и так далее, подробнее на сайте разработчика, использует mootools. На моем сайте используется для фотогалерей.

Польза несомненна — так как в итоге имеем обычную ссылку (на тот же ютуб), то iPhone открывает контент без проблем, в отличие от встроенного в uppod ютуба. То же касается аудио, открыв ссылку в новом окне, открывается стандартный проигрыватель телефона.

2. Uppod. Несмотря на всё вышесказанное, иногда хочется чтобы видео/музыка были на странице сразу. Недостаток первого метода в том, что нельзя просматривать страницу дальше, пока играет музыка, к примеру.

HTML5 для аудио и видео страшно несовместим с браузерами, а конвертить и хранить специально для FireFox файлы в OGG/OGV я не могу. Исторически сложилось, что когда используют теги <videо>и <аudio>, делают fallback к версии на флешь. Я же сделал наоборот (если нифига непонятно куда это, см. предыдущий пост):


$sText = preg_replace('/<mp3>(.*)<\/mp3>/Ui', '

<object id="audioplayer" type="application/x-shockwave-flash" data="ПУТЬ К ПЛЕЕРУ/player.swf" width="300" height="70"><param name="wmode" value="opaque"></param><param name="allowScriptAccess" value="always"></param>
  
  <param name="movie" value="ПУТЬ К ПЛЕЕРУ/player.swf"></param>
  <param name="flashvars" value="comment=&st=ПУТЬ К СТИЛЮ/mini.txt&file=$1"></param>
<audio src="$1" controls="controls"><a href="$1">Скачать</a></audio>
</object>

', $sText);


В результате сперва iPhone пробует обработать флеш-объект и естественно обламывается. Потом идет очередь HTML5 и тут все хорошо. На худой конец, если и этот тег не поддерживается браузером, выдается просто ссылка на скачивание файла. Вот как оно выглядит на iPhone и в браузере:

IMG_0043041704300433044004430437043A0430 043A0430044004420438043D043E043A 0438 043C04430437044B043A0438 / 04100434043C0438043D043A0430 / MyCrap

Конечно, FLV, OGG и прочее не будет играться айфоном, как не будет играться и не соответствующее его требованиям видео, но это лучше чем ничего.

P.S. На моем сайте для загрузки используется замечательнейший хак MyFiles (модифицированный естественно), а также куски кода для сохранения оригинальной картинки из этого топика (а Highslide мне не нравится и вообще, мы на mootools). Про дизайн сайта не пинайте, он в глубокой разработке =)

4 комментария

avatar
Кто-то тут разрабатывал скин для мобильных, может пригодится.
avatar
Более того, на прошивке iOS4 встроенный Safari научился воспроизводить HTML5 прямо в окне браузера и вместо унылых серых коробочек описанный выше метод вставляет вот так:

0444043E0442043E04330440043004440438044F113085199

Так можно победить нежелание Apple использовать флеш =)
avatar
Правильные мысли!
avatar
Можешь помочь с плеером html5 uppod? Вопрос такой — является ли возможным постить плеер как нибудь в топике, если да, то какой код указывать, где размещать файлы на хосте и какие теги разрешать в text.class.php
Только зарегистрированные и авторизованные пользователи могут оставлять комментарии.