В настоящее время у дизайнеров и разработчиков есть несколько вариантов интеграции видео в веб-страницу. Вы можете создать свой собственный видеоплеер, использовать бесплатные виджеты, встраивать видеокод YouTube или купить модный флеш-плеер.
Существует множество форм, форм и макетов для онлайн-видеоплееров — все они предназначены для улучшения вашего присутствия в сети. Но независимо от того, каким плеером вы пользуетесь, основная цель — предоставить быстрый доступ к вашему видеоконтенту всем вашим посетителям.
Это означает, что каждый пользователь должен иметь возможность воспроизводить видео без получения недружелюбного сообщения «Установите плагин Flash для просмотра этого видео». Подобные оповещения ухудшают пользовательский интерфейс и повышают показатель отказов веб-сайта.
Размышляя об этом, вы можете стремиться к видео технологии HTML5. Ведь HTML5 обещает воспроизводить видео прямо в браузере без каких-либо плагинов. На первый взгляд, это выглядит как идеальное видео решение. Но прежде чем переключить видео с вашего веб-сайта на HTML5, давайте сравним плюсы и минусы классического HTML-видео и инновационной интеграции HTML5-видео.
Flash — это HTML видео промежуточное ПО. Теперь это самый традиционный способ встраивания видео на сайт. Тег <object>
Вот типичный HTML-код для встраивания видео:
<идентификатор объекта = 0 тип = "application / x-shockwave-flash" data = player_flv_maxi.swf width = 512 height = 384> <param name = "movie" value = player_flv_maxi.swf /> <param name = "wmode" value = "opaque" /> <param name = "allowFullScreen" value = "true" /> <param name = "allowScriptAccess" value = "sameDomain" /> <param name = "quality" value = "high" /> <param name = "menu" value = "true" /> <param name = "autoplay" value = "false" /> <param name = "autoload" value = "false" /> <param name = "FlashVars" value = "flv = movie1.flv & width = 512 & height = 384 & autoplay = 0 & autoload = 0 & Буфер = 5 & buffermessage = & playercolor = 464646 & loadingcolor = 999898 & buttoncolor = FFFFFF & buttonovercolor = dddcdc & slidercolor = FFFFFF & sliderovercolor = dddcdc & showvolume = 1 & showfullscreen = 1 & playeralpha = 100 & title = movie1.flv & margin = 0 & buffershowbg = 0 "/> </ Объект>
Как и все промежуточное ПО, плагины Adobe Flash отстают и требуют постоянных обновлений.
HTML5 не нуждается ни в каких плагинах или обновлениях. С новым <video>вставить видео на страницу, подобную этой:
<video width = "320" высота = "240" постер = "intro.jpg" Автовоспроизведение управления цикл> Это содержимое появляется, если тег видео или кодек не поддерживаются. <source src = "intro.mp4" type = "video / mp4" /> <source src = "intro.webm" type = "video / webm" /> <source src = "intro.ogv" type = "video / ogg" /> </ Видео>
Как видите, при использовании HTML5 видео следует предлагать в трех основных форматах: H.264 (.mp4), WebM и Theora OGG. Покрытие всех трех форматов дает вам наилучшие шансы на правильное воспроизведение на всех устройствах.
Однако HTML5 не гарантирует воспроизведение во всех браузерах. Internet Explorer 6, 7 и 8 не может воспроизводить видео HTML5. Это становится актуальным, когда вы знаете, что у вас есть посетители сайта, которые используют такие браузеры. Поэтому вам следует тщательно изучить статистику трафика вашего сайта, чтобы подсчитать процент пользователей версий Internet Explorer до миграции видео HTML5. Google Analytics — отличный инструмент для этого.
Может оказаться, что 60% вашей аудитории придерживаются старомодных браузеров, и поэтому HTML5 не может быть хорошим средством защиты видео для вашего сайта. В качестве альтернативы, если большинство ваших посетителей являются пользователями мобильного Интернета, стоит добавить видео HTML5 на ваш сайт.
В таблице ниже приведены наиболее частые преимущества и недостатки HTML / HTML5, которые необходимо учитывать:
Видео HTML против видео HTML5
|
наценка |
Pros |
Cons |
|
HTML-видео |
Хорошо известный, проверенный временем язык разметки | Flash-плагин является обязательным |
| Поддерживается всеми настольными браузерами: Internet Explorer, Firefox, Chrome, Opera, Safari. | Постоянные обновления плагинов | |
| Множество вариантов видеохостинга: собственный сервер, YouTube, Vimeo и т. Д. | Медленные, высоконагруженные видео | |
| Множество методов встраивания видео: от расширенного кодирования до простого кода копирования и вставки YouTube | Нет воспроизведения видео на мобильных телефонах, таких как iPad и iPhone | |
|
HTML5 |
Не требуется никаких плагинов | Не поддерживается Internet Explorer 6, 7, 8 |
| Работает как на настольных, так и на мобильных устройствах | Требуется конвертация видео | |
| Гибкие настройки плеера: пользователи могут перемещать и вращать веб-плееры | Нет стабильной спецификации. Вы должны изучить новые принципы разметки |
На первый взгляд видео HTML5 имеет больше недостатков, чем активы. Но если вы углубитесь в HTML5-видео дальше, вы увидите, что появляющаяся веб-технология не так неясна. У него уже есть солидный набор инструментов для разработчиков.
Это правда, что HTML5-видео не поддерживается Internet Explorer 6,7 или 8. Поэтому для этих пользователей предоставьте резервную ссылку на YouTube или загрузку, чтобы посетители сайта могли просматривать стандартное Flash-видео:
<video width = "640" height = "360" control> <source src = "__ VIDEO __. MP4" type = "video / mp4" /> <source src = "__ VIDEO __. OGV" type = "video / ogg" /> <object width = "640" height = "360" type = "application / x-shockwave-flash" data = "__ FLASH __. SWF"> <param name = "movie" value = "__ FLASH __. SWF" /> <param name = "flashvars" value = "controlbar = over & amp; image = __ POSTER __. JPG & amp; file = __ VIDEO __. MP4" /> <img src = "__ ВИДЕО __. JPG" width = "640" height = "360" alt = "__ TITLE__" title = "Нет воспроизведения видео Возможности, пожалуйста, загрузите видео ниже "/> </ Объект> </ Видео> <p> <strong> Загрузить видео: </ strong> Закрытый формат: <a href="__VIDEO__.MP4"> «MP4» </a> Открытый формат: <a href="__VIDEO__.OGV"> "Ogg" </a> </ Р>
Преобразование HTML5 в три формата (H.264, OGG и WebM) не так страшно, как может показаться. Есть несколько бесплатных решений:
- HandBrake Video Converter для Mac . Бесплатно, это известное программное обеспечение для конвертирования видео может иметь дело с конвертированием видео в HTML5
- Freemake Video Converter 3.0 для Windows . Это 100% бесплатный инструмент для конвертирования видео. Выберите видео, нажмите кнопку «HTML5», и вы получите видео файлы во всех трех форматах и код видеопроигрывателя для встраивания. Видео Конвертер от Freemake делает всю работу за вас (раскрытие: я работаю для Freemake).
- Замзар . Бесплатный онлайн видео конвертер. Замзарское кодирование немного медленное. Кроме того, вы получите файлы по электронной почте.
Таким образом, даже минусы не означают, что вы не можете использовать HTML5 сегодня .
Напротив, минусы HTML на самом деле сложнее избежать. Уязвимый плагин Adobe Flash, неподходящий для переносных гаджетов, является камнем преткновения для интеграции потокового видео. самое популярное мобильное оборудование не поддерживает Flash-видео. Недавно Adobe даже отменила дальнейшую разработку плагина Flash и обратилась к экосистеме HTML5 / CSS3 со своим инструментом дизайна Adobe Edge.
Очевидно, что HTML5 находится на пути к славе и богатству, но пока рано говорить о полной победе HTML5 над Flash-видео, так как Flash все еще доминирует в потоковых веб-сервисах. По крайней мере, мы должны быть хорошо оснащены для плавного перехода от одной разметки к другой без потерь трафика.
Какие методы вы используете для реализации видео на веб-странице?