HTML5 видео: 10 вещей, которые нужно знать дизайнерам

Революция HTML5 привлекает веб-дизайнеров со всего мира. Новые спецификации поддерживают десятки элементов и атрибутов для создания семантических веб-сайтов. Эти новые функции включают мультимедийные теги для аудио и видео форматов.

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

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

Рекомендуемое чтение: демонстрация веб-сайта HTML5: 48 потенциальных демонстраций убийства флэш

1. Типы СМИ

Когда вы работаете с флэш-видеоплеером, слишком часто можно связать все форматы видео в .flv. Хотя это работает, большинство файлов FLV не могут сохранять качество где-либо рядом с более продвинутыми форматами / кодеками файлов. HTML5 поддерживает 3 важных типа видео: MP4, WebM и Ogg / Ogv. Тип файла MPEG-4 обычно закодирован в H.264, что позволяет воспроизводить его на сторонних проигрывателях Flash. Это означает, что вам не нужно сохранять копию видео .flv для поддержки резервного метода! WebM и Ogg – два новых типа файлов, связанных с видео HTML5. Ogg использует кодировку Theora, основанную на стандартном формате аудиофайлов с открытым исходным кодом. Их можно сохранить с расширением .ogg или .ogv.

WebM – это проект, выпущенный Google, о котором вы можете прочитать больше на Веб-сайт проекта WebM, Формат уже поддерживается Opera, Google Chrome, Firefox 4+ и совсем недавно Internet Explorer 9. Он по-прежнему неизвестен большинству веб-профессионалов, но WebM является ведущим видеоформатом в будущем для веб-видео.

2. Поддержка браузера

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

• Mozilla Firefox – WebM, Ogg
• Google Chrome – WebM, Ogg
• Опера – WebM, Ogg
• Сафари – MP4
• Internet Explorer 9 – MP4
• Internet Explorer 6-8 – нет HTML5, только Flash!

Если вы помните, ранее я упоминал, что большинство проигрывателей флэш-видео будут поддерживать файлы MP4, если они закодированы в H.264. Таким образом, каждый из этих браузеров будет использовать MP4 + Flash в качестве окончательного варианта. Это означает, что вам нужно всего лишь создать два разных формата видео для поддержки всех браузеров. MP4 для Safari / IE9 и выбор между WebM или Ogg для остальных.

На мой взгляд, я настоятельно рекомендую придерживаться формата WebM. У этого проекта есть несколько громких имен (а именно, Google), и он получил большую популярность в сообществе HTML5. Ogg / Ogv будет поддерживаться, но, скорее всего, потеряет популярность из-за меньших размеров файлов WebM. Вы можете прочитать связанную часть на будущее видео в сети написанный Шоном Голлихером.

3. Встраивание простых видео HTML5

Давайте теперь посмотрим на синтаксис, необходимый для встраивания некоторого примера кода. Все, что нам нужно, это HTML5 видео тег ссылаться на URL каждого фильма.

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

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

4. Предлагая флэш-запасной вариант

Приведенный выше пример идеально подходит для всех веб-браузеров, соответствующих стандартам. Тем не менее, мы также должны учитывать, что мир не всегда находится на переднем крае технологий. Мы должны поддерживать пользователей в старых версиях Safari, Mozilla Firefox и особенно Internet Explorer.

Лучший способ добиться этого – использовать Flash-проигрыватель. Они могут быть добавлены с использованием тегов embed или object для ссылки на сторонний файл .swf. JW Player и Flowplayer Вы можете рассмотреть два бесплатных решения с открытым исходным кодом. Но также проверить премиум видео плееры на ActiveDen, который может стоить от 15 до 20 долларов.

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

5. Поддержка мобильных устройств

Эта тема все еще широко обсуждается, так как мобильная индустрия так молода. Apple выпустила поддержку MP4 на устройствах Mac и iOS. Это означает, что вы можете передавать потоковые видеофайлы .mp4 на iPad, iPhone или iPod Touch через стандартный видеоинтерфейс. Это охватывает большую долю рынка.

В последнее время Android-устройствам было трудно достичь такого же уровня поддержки. Тем не менее, Google, наконец, принял .mp4 веб-потоковую передачу, которая теперь использует практически всех мобильных пользователей. А поскольку Flash здесь не вариант, MP4 – лучшее доступное решение. Вот почему вы хотите сначала вставить код .mp4, чтобы устройства iOS могли сразу же распознать файл.

6. Пользовательский агент Safari

Одна ошибка, о которой следует упомянуть, это ошибка, существующая между проигрывателями Flash и нативной потоковой передачей HTML5 .mp4 в Safari. Поскольку браузер может поддерживать оба файла, у вас могут возникнуть проблемы с получением видеопотока HTML5 вместо Flash. Однако благодаря этот отличный пост в блоге на TUAW легко изменить пользовательский агент для просмотра.

Это заставит вашу веб-страницу распознавать браузер как работающий на другом устройстве. Скорее всего, вы бы выбрали iPad, который НЕ поддерживает воспроизведение Flash. Это единственная серьезная проблема, с которой вы можете столкнуться при тестировании собственных методов воспроизведения MP4 и flash.

7. Управление игроками

Хотите верьте, хотите нет, но есть также методы, которые вы можете использовать для управления элементами управления видеоплеера HTML5. Все это можно сделать в JavaScript, используя набор открытых методов. Их слишком много, чтобы перечислять здесь, но попробуйте просмотреть Документы по медиа элементам W3C Больше подробностей.

Чтобы дать вам общее представление, Блог Opera Dev опубликовал несколько коротких уроков, которые отлично подходят для новичков. Даже если вы никогда ранее не пользовались JavaScript или jQuery, все еще просто начать работать с этим. Вы можете вызвать определенные атрибуты видео, такие как отключение звука или currentTime. Затем вы можете выполнять действия (затемнение фона, показ рекламы) на основе этих критериев, манипулируя DOM в jQuery.

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

8. Преобразование формата видео

Это еще одна большая проблема, которая может запутать менее опытных людей. Вы просто хотите, чтобы ваш сайт работал и транслировался, и теперь вам приходится заниматься конвертированием видео? Ну, это на самом деле не так уж сложно.

Чтобы иметь дело с MP4, который является вашим самым большим приоритетом, вы можете использовать HandBrake Это бесплатное решение с открытым исходным кодом, которое работает на всех трех основных ОС. Он будет поддерживать H.264 вместе с несколькими другими кодеками, что делает его лучшим вариантом для халявных пользователей. Если у вас есть деньги, чтобы раскошелиться, я должен порекомендовать Xilisoft конвертер который находится в Mac App Store всего за 40 долларов пожизненной лицензии.

Похоже, что маршрут WebM делает жизнь намного проще. Miro Video Converter это бесплатный инструмент для Windows и OS X, который производит файлы WebM отличного качества. Он также может выполнять кодирование Ogg Theora, которое также имеет довольно хорошее качество.

9. Создание веб-плеера

Форматы видео со спецификациями HTML5 все еще являются новыми для разработчиков. Существуют открытые протоколы, которые ждут, чтобы их можно было воспроизвести, чтобы использовать настраиваемые элементы управления, ползунки, значки воспроизведения / паузы и т. Д. Если вы чувствуете смелость, ознакомьтесь с этим руководством по созданию собственного проигрывателя HTML5 (опубликовано в Splashnology).

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

10. Библиотека VideoJS

VideoJS вероятно, мое любимое решение для видеоплееров HTML5. Все, что вам нужно, это их самодостаточность JavaScript и Таблица стилей CSS включены где-то в вашем документе. Затем вы пишете стандартный HTML5-код ​​видео с некоторыми дополнительными классами для создания скинов. Я добавил их пример кода ниже:

Если вам доведется запустить блог WordPress, вы также можете попробовать их пользовательский плагин WP, Он автоматически включит библиотеку js / css на страницы, где вы отображаете видео HTML5. И вы можете сделать это из любого поста или редактора страниц, используя шорткоды ( посмотреть здесь).

Вывод

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