HTML5 видео 10 вещей, которые нужно знать дизайнерам
Революция HTML5 привлекает веб-дизайнеров со всех уголков земного шара. Новые спецификации поддерживают десятки элементов и атрибутов для создания семантических веб-сайтов. Эти новые функции включают мультимедийные теги для аудио и видео форматов.
В прошлые годы медиаплеер на базе Flash более чем достаточен для потоковой передачи в Интернете, и эта технология все еще необходима для поддержки устаревших браузеров. Но, к счастью, современные стандарты продвинулись, и включение видео HTML5 открывает двери для десятков новых возможностей..
В этом руководстве я хотел бы предложить введение в HTML5-видео для Интернета. Понадобится немного практики, чтобы понять встроенный в браузер плеер и все его функции. И лучший способ познакомиться - это нырнуть в голову первым!
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 Project. Формат уже поддерживается 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 каждого фильма..
Обратите внимание на управления а также Автовоспроизведение атрибуты не должны быть установлены с любыми значениями. Я также включил плакат Атрибут, который загружает изображение поверх видеоплеера перед потоковой передачей. Это общий предварительный просмотр со многими веб-плеерами.
Мы предлагаем форматы MP4 и WebM, встроенные в видеоэлемент. Если ни один из них не может быть загружен, то мы показываем ошибку для пользователя, чтобы обновить свой браузер.
4. Предлагая флэш-запасной вариант
Приведенный выше пример идеально подходит для всех веб-браузеров, соответствующих стандартам. Тем не менее, мы также должны учитывать, что мир не всегда находится на переднем крае технологий. Мы должны поддерживать пользователей в старых версиях Safari, Mozilla Firefox и особенно в Internet Explorer..
Лучший способ добиться этого - использовать запасной проигрыватель Flash. Они могут быть добавлены с помощью встраивать или же объект теги для ссылки на сторонний файл .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. Это единственная серьезная проблема, с которой вы можете столкнуться при тестировании родных и flash-методов воспроизведения MP4..
7. Управление игроками
Хотите верьте, хотите нет, но есть также методы, которые вы можете использовать для управления элементами управления видеоплеера HTML5. Все это можно сделать в JavaScript, используя набор открытых методов. Их слишком много, чтобы перечислять здесь, но попробуйте просмотреть документы по медиа-элементам W3C для получения более подробной информации..
Чтобы дать вам общее представление, блог Opera dev опубликовал несколько коротких руководств, которые отлично подойдут новичкам. Даже если вы никогда раньше не пользовались JavaScript или jQuery, все равно просто начать работать с этим. Вы можете использовать определенные атрибуты видео, такие как приглушенный или же Текущее время. Затем вы можете выполнять действия (затемнение фона, показ рекламы) на основе этих критериев, манипулируя DOM в jQuery..
Тот же разработчик в статье об Opera предоставляет рабочую демонстрацию своего скриптового видеоплеера. Возможность настроить свои собственные элементы управления UI является выдающейся. Это просто показывает, насколько мощным становится видео HTML5.
8. Преобразование формата видео
Это еще одна большая проблема, которая, скорее всего, запутает менее технически подкованных людей. Вы просто хотите, чтобы ваш сайт работал и транслировался, и теперь вам приходится заниматься конвертированием видео? Ну, это на самом деле не так уж сложно.
Чтобы иметь дело с MP4, который является вашим самым главным приоритетом, вы можете использовать HandBrake, который является бесплатным решением с открытым исходным кодом, работающим на всех 3 основных ОС. Он будет поддерживать H.264 вместе с несколькими другими кодеками, что делает его лучшим вариантом для халявных пользователей. Если у вас есть деньги, чтобы раскошелиться, я должен порекомендовать конвертер Xilisoft, который есть в Mac App Store всего за 40 долларов пожизненной лицензии..
Похоже, что маршрут WebM делает жизнь намного проще. Miro Video Converter - это бесплатный инструмент для Windows и OS X, который производит файлы WebM отличного качества. Он также может выполнять кодирование Ogg Theora, которое также имеет довольно хорошее качество..
9. Создание веб-плеера
Форматы видео со спецификациями HTML5 все еще являются новыми для разработчиков. Существуют открытые протоколы, которые просто ждут, чтобы их можно было воспроизвести, чтобы использовать настраиваемые элементы управления, ползунки, значки воспроизведения / паузы и т. Д. Если вы хотите набраться смелости, ознакомьтесь с этим руководством по созданию собственного HTML5-плеера (опубликовано в Splashnology)..
Код является немного интенсивным для новичков, поскольку он требует расширенного таргетинга CSS и немного формального jQuery. Существуют и другие фреймворки, на которых уже предлагается индивидуальный дизайн плеера. Точно так же эта презентация слайд-шоу - отличное введение в создание проигрывателя видео HTML5..
Сборка проигрывателя видео HTML510. Библиотека VideoJS
VideoJS, вероятно, мое любимое решение для видеоплееров HTML5. Все, что вам нужно, - это встроенная в ваш документ таблица стилей JavaScript и CSS. Затем вы пишете стандартный HTML5-код видео с некоторыми дополнительными классами для создания скинов. Я добавил их пример кода ниже:
Если вам доведется запустить блог WordPress, вы также можете попробовать их собственный плагин WP. Он автоматически включит библиотеку js / css на страницы, где вы отображаете HTML5-видео. И вы можете сделать это из любого поста или редактора страниц, используя короткие коды (см. Здесь).
Заключение
Я надеюсь, что это вводное руководство может пробудить ваш интерес к будущему веб-видео. Поскольку все больше пользователей обращаются к мобильным устройствам, важно, чтобы стандарты HTML5 были приняты для этих типов носителей. Сеть должна быть упрощена, чтобы разработчики могли быстрее создавать полностью поддерживаемые решения. Мы будем рады услышать ваши идеи и предложения о будущем HTML5-видео. Если вы хотите поделиться, пожалуйста, не стесняйтесь оставлять комментарии в области обсуждения ниже.
