Может кто-нибудь, пожалуйста, объясните (этому разработчику C/С++), как это возможно из технической/кодирующей точки зрения, что текстовый язык разметки (HTML5) можно считать заменой мультимедийной среде (Flash )?
Пожалуйста, не ущемляйте аргументы — только технические факты.
Mike Willekes 31 янв. 2010, в 17:58
Поделиться
Обратите внимание, что HTML уже не был таким статичным, как вы его описали, уже довольно давно. В то время как HTML5 выводит его на новый уровень, «нормальный» HTML уже может дать интересные эффекты с помощью CSS + JS.
Joachim Sauer 17 авг. 2010, в 08:36
Они говорили это годами и пытались «стандартизировать стандарты» сети в течение многих лет, но, похоже, ничего не изменилось. Flash (и Silverlight) решает проблему несовместимости между браузерами лучше, чем что-либо еще. (Не совсем кросс-платформенный, но стандартная кросс-браузерная платформа, безусловно, лучше, чем вообще никакой стандартной платформы.) Между тем, число конкурирующих браузеров, кажется, увеличивается, делая стандартизацию через дисциплину разработчика (ха-ха) еще менее вероятной для Работа. Подход с обратно совместимой программной виртуальной машиной, такой как Flash или Silverlight, просто работает.
HTML5 as Fast As Possible
Manius 12 нояб. 2011, в 03:32
Вместо того, чтобы пытаться исключить плагины, обидно, что «люди HTML5» не работают над стандартизацией и улучшением поддержки плагинов. Если бы браузер можно было превратить в «систему доставки платформы» вместо «системы доставки контента», у нас могло бы быть много конкурирующих (и для пользователей, полностью прозрачных и автоматически устанавливаемых) веб-«платформ», таких как Flash, Silverlight, JavaFX. и, конечно, различные HTML-рендереры «устаревшей сети». Это немедленно решило бы все проблемы кросс-браузерной и обратной совместимости, поставив платформу под контроль одного «разработчика платформы». Ну что ж..
Manius 12 нояб. 2011, в 03:37
Термин html5 обычно относится к веб-приложениям с API-интерфейсами HTML5 JavaScript (которые включают в себя базы данных, сети, обмен сообщениями, хранилище), а также к графическим анимациям и эффектам с манипуляциями CSS и DOM. Не говоря уже о таких технологиях, как canvas, svg, спрайты, графические элементы управления преобразованиями изображений и так далее.
eckes 18 фев. 2015, в 05:30
137 голосов против «неконструктивного» вопроса . ирония в лучшем виде
Mike 13 дек. 2017, в 15:11
Один новый язык и API не могут заменить Flash, поскольку при этом отсутствует необходимость в программном обеспечении для разработки. Ответ на вопрос OP должен звучать так: «Adobe переименовывает Adobe Flash в более универсальное программное обеспечение для создания интерактивных медиаданных с добавлением поддержки создания проектов для HTML5», что и произошло с Adobe Animate. Смотрите этот пост в конце 2015 года: theblog.adobe.com/… Творческие сообщества, такие как Newgrounds, поддерживают это.
Zyl 19 нояб. 2018, в 22:38
Показать ещё 4 комментария
Поделиться:
web-standards
25 ответов
Лучший ответ
То, что люди свободно ссылаются на HTML5 в контексте этого обсуждения, представляет собой комбинацию HTML как языка разметки, CSS, который определяет, как он визуализируется, и код javascript, который динамически манипулирует HTML и CSS.
Кроме того, HTML5 содержит не только стандартные текстовые элементы, но и , на которые можно рисовать 2d-графику, и элементы, которые вставляют видео (как следует из названия).
Таким образом, в полноценной реализации HTML5 вы можете внедрять динамические веб-сайты без использования Flash. Примером может служить версия HTML5 версии Youtube, недавно представленная как бета для пользователей Safari/Chrome, см. здесь. Другой —
Yuji 31 янв. 2010, в 18:24
Поделиться
processing.js также является интересным приложением тега canvas.
Esko 31 янв. 2010, в 18:10
Вы также можете визуализировать 3d-элементы внутри элементов canvas, используя любое количество 3d-библиотек, в зависимости от вашего браузера и ОС. Последний предварительный просмотр IE9 показывает использование этого с помощью встроенной поддержки (я предполагаю, DirectX, но я не уверен) ie.microsoft.com/testdrive/Performance/AsteroidBelt/…
NateDSaint 30 июнь 2010, в 20:10
Я не думаю, что Canvas может заменить вспышку любым способом. Это не векторная анимация, ее нелегко использовать для аниматора и т. Д. До тех пор, пока не появится хороший инструмент для создания анимации флэш-качества в SVG, CSS, HTML и некоторых JS, он не заменит Flash для аниматоров. С точки зрения видео, тег html5 video — это то, что должно быть распространено.
sinni800 03 нояб. 2012, в 01:33
«Полноценная реализация HTML5», май 2014: по-прежнему проблемы совместимости с различными браузерами.
Kai Noack 24 май 2014, в 08:44
Показать ещё 2 комментария
Когда Стив Дж. сделал комментарии о том, что HTML5 является будущим, он не стал объяснять, что это утверждение действительно относится к наиболее широко используемому Flash сегодня, что является видео. Возможно, он не объяснил это намеренно, так что многие дезинформированные конечные пользователи, которые хотят посмотреть Hulu на своих iPhone, развяжут свой гнев против Flash. Это именно то, что происходило. Это раздражает, и я потерял уважение к Стиву.
Стек HTML5 (html, css и JS) НЕ будет прямой заменой Flash. Я разрабатываю Flash-контент уже более 10 лет, я также очень компетентен в JS. Я сжимаю мысль об использовании JS для задач, где ActionScript может выполнить одно и то же в 50% меньше кода. Есть задачи, которые будут очень сложными, если не невозможными, с JS и CSS.
Для рудиментарных анимаций и JQuery-подобных функций, конечно, HTML5 может быть жизнеспособным вариантом вместо Flash. Но для сложных игр и RIA я просто этого не вижу. ActionScript превратился в надежный, полнофункциональный язык.
Другое важное обстоятельство заключается в том, что Flash-плеер периодически обновляется Adobe для решения любых проблем, которые могут возникнуть. Как они будут обновлять/улучшать спецификацию HTML5, если она станет нормой, а Flash пошла? Они не будут. Вы должны ждать HTML6 и всех браузеров, чтобы поддержать его. Это означает, что вы в конечном итоге ожидаете 5-10 лет.
Отличный способ вернуть нас в 1998 году. Нет, спасибо, теперь я буду придерживаться Flash.
Насколько открытые стандарты являются достойной целью, я не вижу этого в том, как они говорят.
Dresden2 03 фев. 2010, в 21:42
Поделиться
Со стороны SJ, я видел сайты, которые ставят мою мощную машину на колени благодаря рекламе на основе Flash. Это по общему признанию плохо сделанная реклама вспышки, но это — вспышка. Теперь на мобильном телефоне реклама, которая может привести к резкому увеличению скорости процессора до 100%, и я поддерживаю утверждение SJ, что Flash вреден.
graham.reeds 26 май 2010, в 11:00
ActionScript основан на точно такой же спецификации ECMA / ISO, что и JavaScript. Хотя есть некоторые библиотеки, которые предоставляют полезную и уникальную функциональность (например, привязку к сокетам TCP), и она имеет некоторые расширенные опции синтаксиса (например, пространства имен, библиотеки), я опровергаю мнение о том, что для реализации функциональности реального мира требуется «на 50% меньше кода». в ActionScript против JavaScript — особенно для игр. Я также добавил бы, что JavaScriptCore, V8 и V8 часто превосходят ActionScript (хотя это правда, что JScript в IE работает лишь незначительно быстрее, чем старик со счетами).
Iain Collins 16 июнь 2010, в 09:09
«Сложные игры» не достижимы? Я не думаю, что я согласен с этим утверждением. Javascript — это такой же язык, как и любой другой (и, как указывает Иэн, по сути идентичный ActionScript). Возможно, вы думаете об API, а не о языке; хотя есть много доступных API Javascript, если вы решите их искать. Я думаю, что с добавлением API рендеринга (т.
Е. Элемента canvas) вы сможете достичь любой сложности игры, которую сможете достичь в другой среде. Я считаю, что говорить, что язык не способен решить определенную проблему, — заблуждение.
Will Baker 18 авг. 2010, в 23:29
Можно писать сложные игры на Javascript. Это не значит, что я бы хотел. Игры в значительной степени полагаются на структурные особенности языков для лучшего разделения систем, логики игрового процесса и т. Д. И нет никаких сомнений в том, что в Javascript явно отсутствуют структурные особенности (например, использование замыканий для обертывания библиотеки в объекте JS — это круто Идея, что я могу оценить, но это немного дрянной). Что касается API, я отказываюсь касаться игр html5 / JS / canvas, пока догонит до .
michael.bartnett 09 авг. 2011, в 00:14
Я поддерживаю это. Для меня Flash как инструмент анимации не может быть заменен материалом HTML5 для чего-то большего, чем реклама или логотип сайта. Все пламенеют, но где же смешные веб-анимации, если они исчезли? Люди уже начали рендерить свои Flash-анимации в видео с низким разрешением, чтобы вы могли смотреть их в пикселях . Нет, я бы предпочел иметь (МАЛЕНЬКИЙ!) Flash-файл с потрясающей векторной графикой, которую я могу растянуть на 1080p или больше если я хочу без них
sinni800 03 нояб. 2012, в 01:38
На самом деле ActionScript и JavaScript являются реализациями ECMAScript, просто Adobe Flash предоставил инструменты для гораздо более удобного и разумного способа выполнения задач, чем необработанный JavaScript, и приложения Flash обычно запускаются в изолированном контейнере-плагине в браузер, в то время как JavaScript интерпретируется на лету каждым отдельным механизмом браузера.
Kmeixner 04 сен. 2013, в 22:17
Впервые я вижу упоминание «HTML6». Я также голосую за Flash, HTML5 слишком медленный. Это стало лучше, особенно для 3D вещей (см. Пример с тремя js cube ). Но все же, хромает по сравнению с Flash, особенно на старых компьютерах.
Kai Noack 24 май 2014, в 08:49
1.21 gigawatts 11 авг. 2015, в 06:17
graham.reeds 11 авг. 2015, в 09:19
1.21 gigawatts 11 авг. 2015, в 11:43
graham.reeds 12 авг.
2015, в 11:23
Вам просто больно, что Стив Джобс или уволил вас с работы, или он заставил вас изучать новую платформу. Во всяком случае, забудь о политике. Дух его сообщения верен. В частности, веб должен быть об открытых стандартах, таких как HTML5. Внедрение этих стандартов, таких как быстрый рендеринг JavaScript, — это то, где поставщики должны конкурировать.
Это делает вещи лучше для всех, а не только для некоторых.
Phil 21 фев. 2019, в 18:19
Показать ещё 10 комментариев
Я думаю, что некоторые люди здесь программируют снобы и не слушают. Я тоже начинаю Flash-разработчик, и я не хочу, чтобы он уходил. Ты знаешь почему? Потому что люди CREATIVE могут использовать Flash для развития того, что в нашем мозгу очень легко. Человек, который любит рисовать и создавать сцены, не обязательно кодировать. Набрав кучу «предложений», мы не рисуем и не анимируем!
То, что вы говорите о HTML5, похоже на то, что Пикассо и Дали должны были изучить язык программирования, чтобы рисовать. Смешно, правда?
Вот почему люди предпочитают Flash для HTML5. Он не корыстный, он просто признает, что люди, способные создавать классный анимированный веб-контент, скорее смогут создавать свои собственные видения, а не изучать несвязанные навыки или полагаться на кого-то другого, чтобы интерпретировать для нас.
Вместо того, чтобы высмеивать, вы можете придумать визуальную среду HTML5, которая конкурирует с Flash.
Katryna 18 авг. 2010, в 23:40
Поделиться
Я думаю, что это хороший момент. Пока не будет эквивалентного инструмента для разработки контента HTML5, его будет сложно принять. Конечно, программист может сделать то же самое с HTML5 / Javascript / CSS3, что он может сделать с Flash, но художники не захотят возиться с кодом. Нам нужен набор веб-анимации, который по крайней мере так же прост в использовании, как и инструменты Adobe. Без сомнения, Adobe уже работает над этим, поэтому они не теряют своего доминирования в создании веб-контента.
Will Baker 19 авг. 2010, в 03:08
Этот ответ не имеет абсолютно никакого отношения к Flash с одной стороны или к HTML5 / CSS3 / JS с другой. Этот ответ полностью об инструментах разработки. Если авторский инструмент может быть создан для одного языка (Flash), почему один не может быть создан для другого языка (HTML)? На самом деле я видел, что это предполагает, что Adobe сама может модифицировать свои инструменты авторинга для вывода контента открытого стандарта.
TRiG 22 сен. 2010, в 20:39
ТРИГ, я не согласен. Вопрос в том, сможет ли HTML5 заменить Flash. Чтобы ответить на вопрос реалистично, вам все равно нужно учитывать доступность инструмента авторинга.
helloworlder 03 окт. 2010, в 16:16
Adobe должна включить поддержку canvas из флеш-среды IDE, т. Е. Сделать всю анимацию в IDE и вывести готовый пакет HTML5 с разметкой, css и js. Дайте людям выбор выхода, как они делают с AIR. Это абсолютно обеспечит долговечность Flash IDE, если не обязательно преобладание SWF.
Источник: overcoder.net
Как конвертировать баннер flash в html5
Здравствуйте, уважаемые друзья. Баннеры в формате HTML5 набирают всё больше и больше популярности. В то время как Flesh отходит на второй план.
В Google Chrome с 1 сентября этого года, по умолчанию включена настройка приостанавливать показ flash контента. Пользователь сам решает, будет он просматривать такой контент или нет.
Также AdWords в настоящее время поддерживает только Adobe Flash Player версий 4–10.1. Другие версии не загружаются.
А тут ещё и проблемы отображения flash-контента на мобильных устройствах.
И, выходит, что появилась необходимость конвертировать баннеры flash в html5. Так, например, рекламные сети AdWords и DoubleClick сами конвертируют баннеры SWF (флешь) в HTML5. Директ, кстати, тоже не отстаёт.
Конечно, не все анимированные баннеры флешь поддаются конвертации. Сложная анимация, конвертации, пока, не поддаётся.
Поэтому лучше, конечно, изучать Google Web Designer и сразу создавать красивые баннеры в формате html5.
Но, если вам всё, же нужно переделать баннер flash, то я расскажу, как это сделать.
Где конвертировать FLASH?
Google специально разработал сервис – Swiffy, который поможет определить можно ли ваш баннер конвертировать, а если да, то и скачать готовый баннер html5.
Использовать этот сервис можно либо напрямую в интернете, либо как расширение для Flash Professional.
Пользоваться сервисом довольно просто. Всё делается буквально в три действия.
В качестве альтернативы есть несколько программных продуктов позволяющих решить эту задачу. Но, они все платные и вряд ли оправдают вложения. И зачем они, если есть бесплатный сервис swiffy.
Как с помощью сервиса Swiffy конвертировать flash-баннер.
Первым делом переходите на страницу сервиса и нажимаете по ссылке «UPLOAD NOW».
Далее, выполняете три простых шага.
- Выбор файла flash. Вам нужно выбрать файл в формате SWF и размер его не должен превышать 1Мб (мегабайт).
- Установите чек-бокс, подтверждающий согласие с условиями использования сервиса.
- Жмёте кнопку «UPLOAD».
Если ваш баннер не содержит сложной анимации, то вы увидите предпросмотр готового баннера в формате HTML5. Время жизни такого предпросмотра — 15 минут. После чего ссылка перестаёт работать.
Для просмотра результат в отдельном окне можно нажать на кнопку «VIEW CONVERSION».
А теперь самое интересное. Нужно сохранить полученный результат в виде html страницы.
Для этого нажимаете правую кнопку мышки на кнопке «VIEW CONVERSION» и в контекстном меню выбираете пункт «Сохранить объект как…» или «Сохранить ссылку как…», зависит от браузера.
Вот и всё, баннер сконвертирован из flash в html5 и его можно использовать на любых сайтах.
Памятка: схема размещения баннера html5 на сайте
— загрузите файл на хостинг;
— вставьте код фрейма
Измените ссылки и имя файла, а также идентификатор в соответствии с размерами баннера.
— В таблицу стилей вставьте стили выравнивания для блока ДИВ и настройки фрейма.
#html5 #banner728x90
А теперь предлагаю посмотреть видеоурок для закрепления материала, где вы увидите процесс конвертирования и размещения баннера html5 на сайте.
На этом сегодня всё. До встречи в новых видеоуроках и статьях. Желаю вам успехов, друзья.
С уважением, Максим Зайцев.
Источник: 1zaicev.ru
Поддерживаемые форматы аудио и видео
В рассмотренных ранее примерах использовались два популярных стандарта: MP3 для аудио и H.264 для видео. Этого достаточно для Chrome и Safari, но не для других браузеров.
По поводу войны мультимедийных форматов для HTML5 у веб-разработчиков имеется несколько сердитых вопросов. Таких как, действительно ли аудио и видео HTML5 находятся в состоянии безнадежной конфронтации и на ком лежит главная вина за это? Но на эти вопросы нет ясных и однозначных ответов. У каждого разработчика браузеров есть свои оправдания и объяснения, каким стандартам мультимедиа отдать предпочтение.
Небольшие разработчики, такие как Mozilla, создатели браузера Firefox и разработчики Opera, не желают платить непомерно высокую для них цену за лицензию на использование таких популярных стандартов, как MP3 для аудио или H.264 для видео (хотя поддержка этих стандартов включена в версии Firefox 24 и выше, после солидного спонсирования от Google ;). И их трудно винить за это, ведь они предоставляют свои продукты бесплатно.
У компаний покрупнее (таких как Microsoft, Google или Apple) имеются свои оправдания почему надо избегать нелицензированных стандартов. Они жалуются, что качество работы этих стандартов будет ниже (в настоящее время они не поддерживают аппаратное ускорение) и что они не так широко используются, как запатентованные стандарты, такие как, например, H.264, который используется в камкордерах, проигрывателях Blu-Ray и во многих других разных устройствах.
Но самая большая проблема может состоять в том, что никто по-настоящему не уверен, что эти нелицензированные стандарты не связаны с чьей-либо интеллектуальной собственностью. Если такие связи имеются, используя эти стандарты, крупные компании наподобие Microsoft или Apple, делают себя уязвимыми к дорогостоящим искам за нарушение патентных прав, которые могут тянуться годами.
Знакомимся с форматами
Официальный стандарт HTML5 не требует, чтобы браузеры поддерживали какой-либо конкретный аудио- или видеоформат. (Ранние версии стандарта содержали такую рекомендацию, но в результате интенсивного лоббирования она была отменена.) Вследствие этого разработчики браузеров могут выбирать форматы, какие они хотят поддерживать, несмотря на то обстоятельство, что разные форматы органически несовместимы друг с другом. Список и краткое описание основных форматов, используемых в настоящее время, приведен в таблице:
| MP3 | Самый популярный аудиоформат в мире. Но стоимость лицензии делает его непрактичным для небольших разработчиков, наподобие Opera | mp3 | audio/mp3 |
| Ogg Vorbis | Открытый, бесплатный стандарт, предоставляющий высококачественное сжатое аудио, сравнимое с MP3 | ogg | audio/ogg |
| WAV | Первоначальный формат для сырого цифрового аудио. Не использует сжатие, поэтому файлы невероятно большого объема и непригодны для большинства интернет-приложений | wav | audio/wav |
| H.264 | Промышленный стандарт для кодирования видео, особенно при работе с видео высокой четкости. Применяется в бытовых устройствах (таких как проигрыватели и камкордеры Blu-Ray), на видеообменных сайтах (таких как YouTube и Vimeo) и в браузерных модулях расширения (таких как Flash и Silverlight) | mp4 | video/mp4 |
| Ogg Theora | Открытый, бесплатный стандарт для видео, созданный разработчиками аудиостандарта Vorbis. Качество и производительность ниже стандарта H.264, но достаточно высокие, чтобы удовлетворить потребности большинства пользователей | ogv | video/ogg |
| WebM | Новейший бесплатный видеоформат, созданный Google на основе приобретенного ими VP8. Критики доказывают, что его качество еще не на уровне видео H.264 и он может содержать скрытые связи с другими патентами, что может вызвать лавину судебных исков в будущем. Тем не менее, WebM является наилучшим выбором для будущего открытого видео | webm | video/webm |
В этой таблице также указаны рекомендуемые расширения файлов для мультимедиа. Чтобы осознать, почему это важно, нужно понимать, что для создания видеофайла в действительности применяются три разных стандарта. Первым, наиболее очевидным, стандартом является видеокодек, применяемый для сжатия видео в поток данных. В качестве примера можно назвать такие кодеки, как H.264, Theora и WebM.
Вторым является аудиокодек, который применяется для сжатия одной или нескольких аудиодорожек. Например, для видео в формате H.264 обычно используется звук в формате MP3, а для видео Theora — звук Vorbis. Наконец, формат контейнера применяется для упаковки видео и аудио вместе с описательной информацией и, необязательно, другими безделушками типа изображений и субтитров. Часто расширение файла обозначает формат контейнера, т.е. расширение mp4 означает контейнер типа MPEG-4, расширение ogv — контейнер Ogg и т.п.
Но не все так просто, т.к. формат контейнера поддерживает несколько разных аудио- и видеостандартов. Например, популярный контейнер Matroska (mkv) может содержать видео в формате H.264 или Theora. Чтобы не усложнять этот вопрос излишними подробностями, в приведенной таблице каждый видеоформат соотнесен с наиболее употребляемым для его упаковки контейнером, для которого также обеспечивается наиболее высокий уровень поддержки для Интернета.
В приведенной таблице также указан требуемый тип MIME, который нужно установить в настройках вашего веб-сервера. Если не указать правильный тип MIME, браузеры могут заупрямиться с воспроизведением вполне качественного мультимедийного файла.
Поддержка браузерами форматов мультимедиа
Все аудио- и видеоформаты в мире будут вам бесполезны, если вы не знаете, как они поддерживаются разными браузерами. Разобраться в этом вопросе вам поможет следующие таблицы, в которых показаны поддержки основными браузерами аудио- и видеоформатов:
| IE | Firefox | Chrome | Safari | Opera | Safari iOS | Android | |
| MP3 | 9 | 24 | 5 | 3.1 | — | 3 | — |
| Ogg Vorbis | — | 3.6 | 5 | — | 10.5 | — | — |
| WAV | — | 3.6 | 8 | 3.1 | 10.5 | — | — |
| IE | Firefox | Chrome | Safari | Opera | Safari iOS | Android | |
| H.264 | 9 | 24 | 5 | 3.1 | — | 4 | 2.3 |
| Ogg Theora | — | 3.5 | 5 | — | 10.5 | — | — |
| WebM | 9 (при установке кодеков) | 4 | 6 | — | 10.6 | — | 2.3 |
Поддержка этих форматов мобильными браузерами представляет особый вид проблем. Прежде всего, это нерегулярность работы. Некоторые функции, такие как автоматическое воспроизведение и повтор, могут не поддерживаться, а некоторые устройства могут воспроизводить видео только в специализированном проигрывателе, а не прямо в окне на веб-странице. А еще видео для мобильных устройств обычно нужно кодировать с кадром меньшего размера и худшего качества.
Если вы хотите, чтобы видео проигрывалось на мобильных устройствах, примите за правило кодировать его в формате H.264 Baseline Profile (а не в формате High Profile). Для телефонов iPhone и под управлением операционной системы Android следует использовать размер 640×480, а для BlackBerry — 480×360. Многие программы кодирования имеют предварительные настройки, с помощью которых можно создать видео, оптимизированное для мобильных устройств.
Множество форматов: как понравиться всем браузерам
Что делать бедному веб-разработчику со всеми этими форматами? Горькая правда состоит в том, что ни один аудио- или видеоформат не будет работать на всех браузерах. Если вы хотите поддерживать все браузеры, а поддерживать их все вы должны, вам нужно запастись мультимедийными файлами в нескольких форматах. Кроме этого, вам, скорее всего, нужно будет организовать резервное решение Flash для посетителей, которые пользуются браузерами, не признающими HTML5, такими как, например, IE8.
К счастью, элементы и поддерживают достаточно хорошую систему предоставления резервных решений, которая была хорошо отлажена новаторами веб-технологий. Но, к сожалению, война форматов означает, что содержимое нужно будет кодировать, по крайней мере, дважды, что является затратным процессом по времени, процессорным ресурсам и дисковому пространству.
Но прежде чем приступать к работе, нужно определиться со стратегией поддержки браузеров, которые не признают HTML5. По большому счету, веб-разработчики имеют на выбор два хороших пути:
Использовать Flash в качестве основного решения, а HTML5-решение в качестве резервного
Таким образом, все посетители вашего сайта смогут использовать Flash, за исключением тех, на чьих браузерах этот модуль не установлен. Эта стратегия имеет смысл, если вы уже предоставляете на своем сайте видеосодержимое посредством Flash, но хотите еще привлечь пользователей iPad и iPhone.
Использовать HTML5 в качестве основного решения, а Flash-решение — в качестве резервного
Таким образом, все посетители получают HTML5-видео и/или аудио, за исключением тех, кто использует старые браузеры, которые получают Flash-содержимое. Если вы пойдете этим путем, можно также поддерживать меньшее число форматов HTML5. В таком случае посетители, чьи браузеры хотя и поддерживают HTML5-мультимедиа, но не поддерживают предоставляемые вами форматы, также получат Flash-содержимое. Так как будущее за этим подходом, то он является предпочтительным при условии, что текущие ограничения HTML5 видео и аудио — вам не помеха.
В следующих разделах мы будем воплощать второй подход в жизнь. Таким образом, мы обеспечим для браузеров чисто HTML5-решение во всех случаях, когда это возможно.
Элемент
Первым шагом в обеспечении поддержки нескольких форматов будет удаление атрибута src из элемента или и замена его вложенным списком элементов . Например:
В данном случае элемент содержит два элемента , каждый из которых указывает на отдельный аудиофайл. Из указанных файлов браузер выбирает первый, формат которого он поддерживает. В частности, Opera возьмет файл mysong.ogg, a Firefox, Safari и Chrome — файл mysong.mp3.
Теоретически, браузер может определить, поддерживает он или нет конкретный файл, загрузив и исследовав небольшую его часть. Но лучшим подходом будет использовать атрибут type, чтобы предоставить правильный MIME-тип. Таким образом, браузер попытается загрузить только тот файл, который он, как считает, может воспроизвести.
Этот же метод применяется и для элемента . В следующем листинге показан пример указания видеосодержимого в двух разных форматах — H.264 и Theora:
В этом примере следует отметить одну новую особенность. При использовании разных видеоформатов файл в формате H.264 всегда должен быть в списке первым. В противном случае он не будет проигрываться на старых устройствах iPad под управлением iOS 3x. (Эта проблема была решена в операционной системе iOS 4, но размещение файла H.264 вверху списка ничем ничему не вредит.)
Так сколько же видеоформатов следует использовать? Чтобы прикрыть все тылы необходимо использовать форматы H.264 и Theora для основного решения HTML5 и Flash для резервного. Для лучшего качества видео формат Theora можно заменить форматом WebM. Или же можно совсем разойтись и включить все версии своего видео — H.264, Theora и WebM в указанном порядке. Версия WebM идет перед версией Theora для того, чтобы браузеры, которые поддерживают эти формата, выбрали видео лучшего качества.
Ну а если гулять по полной программе, то можно создать одну веб-страницу с видео как для настольных компьютеров, так и для мобильных устройств. В таком случае нужно не только предоставить файлы в формате H.264 и Theora, но также создать версии видеофайлов меньшего объема, более подходящие для менее мощных мобильных устройств и интернет-подключений с меньшей пропускной способностью.
Резервное решение Flash
Испокон веков все браузеры обрабатывают нераспознаваемые теги одинаково — игнорируют их. Например, если Internet Explorer 8 встречается открывающий тег элемента , он с ветерком проносится мимо него, не затрудняясь ознакомиться с атрибутом src и другими параметрами этого элемента. Но при всем этом, браузеры не игнорируют содержимое внутри неизвестного им элемента, что является важной особенностью. Это означает, что в случае следующей разметки:
Если вы видите эту надпись, значит ваш браузер не поддерживает видео HTML5.
браузеры, которые не понимают HTML5, ведут себя, как будто бы они видели вот эту разметку:
Если вы видите эту надпись, значит ваш браузер не поддерживает видео HTML5.
Эта особенность и лежит в основе бесшовного предоставления резервного решения для старых браузеров.
Теперь, после того как мы научились вставлять резервное содержимое, надо решить, какое именно содержимое вставлять. Одним из примеров плохого резервного содержимого будет текстовое сообщение, наподобие предыдущего «Если вы видите эту надпись, значит ваш браузер не поддерживает видео HTML5». Посетители веб-сайтов считают сообщения такого типа крайне невежливыми и, скорее всего, не возвратятся на сайт, приветствующий их таким образом.
Правильный подход — это включить в качестве резервного содержимого другое работоспособное видеоокно, иными словами, любое содержимое, которое бы пользовалось на обычной видеостранице, т.е. странице без поддержки HTML5. Можно использовать видеопроигрыватель Flash (или аудиопроигрыватель Flash для аудио). К счастью, в Интернете существует масса видеопроигрывателей Flash, многие из которых бесплатные, по крайней мере, для некоммерческого использования. И большинство из них поддерживает формат H.264, который вы уже, наверное, используете для HTML5-видео.
В следующем листинге приведен пример использования в качестве резервной решения в элементе проигрывателя Flowplayer:
Если же требуется, наоборот, реализовать основное решение в виде Flash, а резервное — в виде HTML, нужно просто переставить строки из предыдущего примера. Начинаем с элемента , в который вставляем элемент непосредственно перед закрытием тега :
Обычно этот подход следует применять только в том случае, если нужно расширить существующий веб-сайт на основе Flash для поддержки устройств Apple, таких как iPad. Кстати, существует по крайней мере один проигрыватель на JavaScript со встроенной возможностью резервного решения HTML5. Называется он JW Player.
Источник: professorweb.ru