Статьи

Принципы встраивания онлайн-видео

Ранее я писал о 11 типичных ошибках онлайн-видео, а затем о шести шагах по разработке эффективной стратегии видео . Пришло время взглянуть на некоторые механизмы отображения видео на веб-сайтах и ​​на то, как они могут повлиять на ваш выбор.

Прежде чем мы начнем, я предупрежу вас: если вы думали, что иметь дело с Internet Explorer, было вашим худшим кошмаром в коде, подумайте еще раз.

Любой веб-разработчик, который хочет (или должен) воспользоваться популярной волной интереса к онлайн-видео, должен найти наилучший способ встраивания этого типа контента, чтобы обеспечить возможность его воспроизведения на как можно большем количестве устройств и браузеров.

Клиенты могут быть требовательными, когда дело доходит до видео, и они могут не понимать, насколько трудным является на самом деле кодирование видео, размещенного на веб-странице.

Вот некоторые принципы, которые следует учитывать при рассмотрении вопроса о том, нужно ли и как добавлять видео в свои проекты веб-разработки. Начнем с простого способа сделать это.

Простой способ вставлять видео

По моему личному мнению, самый простой (и лучший) способ размещения видео на сайтах ваших клиентов — это разместить их на YouTube. Я уверен, что это не будет сюрпризом, так как большинство людей используют YouTube для своих нужд в видеохостинге / встраивании, но для этого есть веская причина: это легко. YouTube делает всю работу за вас.

Вот несколько причин, почему встраивание видео на YouTube — ваш лучший вариант:

Работает на всех браузерах и устройствах

При размещении видеоконтента самостоятельно и / или с помощью видеоплеера с собственным хостингом самая большая проблема заключается в том, чтобы видео работало на всех устройствах. YouTube устраняет эту проблему, поскольку они сделали всю тяжелую работу за вас. Их видео воспроизводятся на ПК, планшетах и ​​смартфонах (включая iPhone и iPad) и практически во всех браузерах. Все, что вам нужно сделать, это скопировать и вставить код для вставки. Просто.

Там нет стоимости

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

Люди доверяют YouTube

Фактически, 99% людей, которые используют Интернет, сталкивались с видео YouTube, либо на своем собственном сайте, либо встроенными на сайт, подобный вашему. Из-за этого многократного воздействия люди доверяют этому. Странно, но я думаю, что использование фирменного плеера YouTube на самом деле повышает доверие посетителей к сайту вашего клиента.

Что делать, если я не могу использовать YouTube?

Очевидно, что у YouTube есть несколько недостатков (например, ограниченные возможности расширенных фрагментов, принудительный брендинг YouTube и т. Д.), И в некоторых случаях клиенты будут запрашивать, чтобы вы самостоятельно размещали видео и видеоплеер.

Если это так, вот несколько рекомендаций, которые помогут вам в процессе разработки.

1 — Не используйте Flash Video Player (если вы можете помочь)

Несколько лет назад Flash был массовым; Люди создавали Flash-игры, загружали Flash-видео и даже создавали целые веб-сайты во Flash (к ужасу SEO-специалистов по всему миру).

В наши дни это совсем другая история, почти полностью благодаря Apple.

По какой-то причине Apple ненавидит Flash и, следовательно, они вообще не позволяют просматривать содержимое Flash на своих устройствах iPhone, iPod Touch или iPad. Они также не предустановили Flash на многих своих компьютерах Mac.

Поскольку эти устройства Apple составляют огромную долю рынка мобильных устройств, вам необходимо помнить об этом, когда дело доходит до кодирования ваших сайтов. Как веб-разработчик в современном мире, вы должны оптимизировать работу мобильных устройств (если ваш клиент не указал — по какой-то причине — что это не является обязательным требованием), и поэтому вам действительно не следует беспокоиться о проигрывателях Flash-видео. совсем.

Это не только устройства Apple, хотя. Microsoft также ограничивает функциональность Flash в своей последней операционной системе Windows 8 с помощью интерфейса «не называй его». Хотя Windows 8 в настоящее время не занимает большую часть рынка, это скоро произойдет, так как новые ПК скоро будут поставляться с предустановленной Windows 8 в качестве стандарта. Так что имеет смысл готовиться к этому сейчас.

Суть в том, что Flash больше не подходит, по крайней мере, для видео. Flash постепенно заменяется новой технологией (например, HTML5), поэтому имеет смысл в первую очередь выбрать этот стиль видеоплеера.

Более того, было бесчисленное количество раз, когда я лично просматривал контент через универсальные Flash-плееры на ПК и обнаруживал, что производительность низкая. Это не то, что вы хотите, чтобы ваши клиенты (или, что более важно, посетители веб-сайтов ваших клиентов) имели дело с.

2 — Используйте HTML5 Player

На этом этапе вам может быть интересно, что вы должны использовать, если вы не должны использовать Flash, и, в основном, ответом является видеоплеер HTML5.

Короче говоря, HTML5 — это будущее Интернета. Многие из вас уже будут кодировать в HTML5, и многие сайты теперь используют HTML5 для воспроизведения веб-видео. Даже YouTube в настоящее время экспериментирует (и совершенствует) видеоплеер HTML5 .

Стоит отметить, что у игроков HTML5 есть ограничения; Примечательно, что некоторые версии Firefox и Opera требуют, чтобы видео было в формате WebM, чтобы проигрывать его через проигрыватель HTML5. Firefox и Opera имеют довольно большую долю рынка ( около 23% в январе ), когда речь идет о пользователях ПК, поэтому важно убедиться, что ваше видео воспроизводится правильно в этих браузерах.

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

3 — Используйте кодек WebM или H.264

Еще одна вещь, о которой вам действительно нужно подумать при размещении видео самостоятельно — это формат файла вашего видео. Когда вы загружаете видео на YouTube или другой сайт обмена видео, вам, как правило, не нужно беспокоиться об этом, поскольку YouTube выполняет всю работу за вас (т.е. конвертирует его в оптимальный формат и т. Д.), Но когда вы размещаете его самостоятельно и используете сам -плеер видео, он должен иметь приоритет.

Основная причина, по которой вам нужно получить правильный формат вашего видео, заключается в том, что некоторые форматы видео могут содержать гораздо большие файлы, чем другие. Несмотря на то, что скорость интернета во всем мире растет, в некоторых регионах он все еще довольно низок, в том числе в некоторых частях США и Великобритании. Например, я в Великобритании, живу всего в 10 милях от крупного города, и моя средняя скорость составляет 2 Мбит / с. При такой скорости мне потребуется около 4 минут для полной передачи видеофайла размером 48 Мб, что означает, что если видеофайлы слишком велики (например, в формате с низким сжатием), это будет мешать моему опыту пользователя.

H.264 и WebM — отличные форматы, так как они обычно сохраняют высокое качество видео даже при высокой степени сжатия. H.264 в настоящее время является стандартным форматом веб-видео, но, как я упоминал ранее, существуют проблемы с этим форматом и некоторыми браузерами при использовании с видеопроигрывателем HTML5, поэтому в некоторых случаях может потребоваться использование WebM.

В настоящее время H.264 и WebM проходят процесс, аналогичный HD-DVD и Blu-Ray несколько лет назад. Microsoft, Apple, Google, Mozilla и многие другие компании заняли определенную «сторону» и поэтому делают это довольно сложным для веб-разработчиков. Вы можете узнать больше о том, какие компании поддерживают какие форматы в отношении видео HTML5 здесь .

Вывод

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

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

Однако, если вы разрабатываете веб-сайт для сравнительно небольшого бизнеса, YouTube предлагает недорогое решение для видеохостинга, которое снизит затраты для вашего клиента и облегчит вашу жизнь как разработчика.