Использование HTML5 для отображения видео в текущих браузерах

Размещение собственного видео HTML 5 vs. Использование YouTube

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

Но использование YouTube для встраивания видео имеет некоторые недостатки

Большинство проблем с YouTube находятся на стороне потребителя, а не на стороне дизайнера, например:

• Медленный поиск и индексация
• Сбои сервера
• Контент удаляется (по-видимому) произвольно
• Слишком много плохого контента

Но есть несколько причин, по которым YouTube также вреден для разработчиков контента, в том числе:

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

HTML5 Video дает некоторые преимущества перед YouTube

С использованием HTML5 for video позволяет вам контролировать каждый аспект вашего видео, от того, кто может его просматривать, какова продолжительность, что содержит контент, где он размещен и как работает сервер. А также HTML5 дает вам возможность кодировать ваше видео в любом количестве форматов, чтобы убедиться, что максимальное количество людей может его просмотреть. Вашим клиентам не нужен плагин или ждать, пока YouTube выпустит новую версию.

Конечно, HTML5-видео имеет некоторые недостатки

Это включает:

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

Краткий обзор поддержки видео в Интернете

Добавление видео на веб-страницы долгое время было трудным процессом. Было так много вещей, которые могли пойти не так:

• Во-первых, вы используете тег, чтобы встроить ваше видео на свою страницу. НО этот тег устарел и заменен другим тегом. И некоторые браузеры все равно никогда не поддерживали это должным образом.
• Итак, вы переключаетесь на тег, но старые браузеры не поддерживают его, а новые браузеры отрывочны в его поддержке.
• Тогда ты думаешь Вспышка! И закодируйте свое видео как файл FLV. Но Вспышка больше не поддерживается на устройствах Windows.
• Итак, вы решили загрузить свое видео на сайт для встраивания видео, такой как YouTube, но тогда у вас возникли проблемы с YouTube, которые мы обсуждали.
• Наконец, вы решили использовать HTML5, но Internet Explorer не поддерживает его (только до Internet Explorer 9). И даже если вы это сделаете, есть два стандарта видеокодеков, которые поддерживаются, и только один браузер может использовать оба.

Так что же тебе делать? Отказ от видео больше не является вариантом для большинства сайтов, поскольку видео становится все более и более важным. И многие сайты успешно перешли на видео.

На следующих страницах этой статьи вы узнаете, как добавить видео на свои веб-страницы, которые работают. в Firefox 3.5, Opera 10.5, Chrome 3.0, Safari 3 и 4, iPhone и Android, а также Internet Explorer 7 и 8. У вас также будут ключи, необходимые для добавления поддержки других старых браузеров, если это необходимо.

Создавайте и редактируйте свое видео

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

• Семейные видеопроекты
• Маркетинговые и рекламные видеоролики
• Видео виртуальные туры
• Как видео
• Свадебные видео

Узнайте, как записывать высококачественное видео

Убедитесь, что вы знаете, как записывать в помещении и на улице, а также как записывать звук. Освещение также очень важно - слишком яркие снимки режут глаза, а слишком темные просто выглядят мутными и непрофессиональными. Даже если вы планируете разместить на своем сайте только 30-секундное видео, чем оно выше, тем лучше оно отразится на вашем сайте.

Помните также, что авторские права распространяются на любые звуки или музыку (а также на видеоматериалы), которые вы, возможно, захотите использовать в своем видео. Если у вас нет доступа к другу, который может написать и сыграть для вас песню, вам нужно найти музыка без лицензионных отчислений играть в фоновом режиме. Есть также места, где вы можете хранить кадры и добавлять их в свои видео.

Редактирование вашего видео

Неважно, какое программное обеспечение для редактирования вы используете, если вы знакомы с ним и можете эффективно его использовать. Gretchen, Desktop Video Guide, предлагает несколько профессиональных советов по редактированию видео, которые помогут вам отредактировать ваши видео так, чтобы они выглядели великолепно.

Сохраните свое видео в MOV или AVI (или MPG, CD, DV)

В оставшейся части этого урока мы предполагаем, что ваше видео сохранено в каком-то высококачественном (несжатом) формате, таком как AVI или MOV. Хотя вы можете использовать эти файлы как есть, вы столкнетесь со всеми проблемами с видео, которые мы уже обсуждали. На следующих страницах объясняется, как преобразовать файл в три типа, чтобы его можно было просматривать в наибольшем количестве браузеров.

Конвертируйте видео в Ogg для Firefox

Первый формат, в который мы преобразуем, - это Ogg (иногда называемый Ogg-Theora). Этот формат доступен для просмотра в Firefox 3.5, Opera 10.5 и Chrome 3.

К сожалению, хотя Ogg поддерживает браузер, многие из известных видеопрограмм, которые вы можете купить (Adobe Media Encoder, QuickTime и т. Д.), Не предлагают вариант преобразования Ogg. Так что единственный способ конвертировать ваше видео в Ogg - это найти программу конвертации в Интернете.

Варианты преобразования

Существует онлайн-инструмент под названием Media-Convert, который утверждает, что конвертирует различные форматы видео (и аудио) в другие видео (и аудио) форматы. Когда мы попробовали это с моим 3-секундным тестовым видео, мы не смогли заставить его работать на моем Mac. Но тебе может повезти больше. Преимущество этого сайта в том, что он бесплатный.

Некоторые другие найденные нами инструменты включают в себя:

• Конвертер видео Miro (Windows Macintosh): эта программа позволяет конвертировать как в Ogg, так и в MP4 (H.264), и имеет открытый исходный код.
• Бесплатный конвертер видео: Мы думаем, что это версия для Windows и Macintosh, но по их сайту было трудно сказать
• Простой кодировщик Theora (Macintosh): это тот, который мы обычно используем.

После того, как вы сохранили свое видео в формате Ogg, сохраните его на своем веб-сайте и перейдите на следующую страницу, чтобы преобразовать его в другие форматы для других браузеров.

Конвертируйте видео в MP4 для Safari и Internet Explorer

Следующий формат, в который вы должны преобразовать видео, - это MP4 (видео H.264), чтобы его можно было воспроизводить в Internet Explorer 9 и более поздних версиях, Safari 3 и 4, а также на iPhone и Android.

Этот формат более доступен в коммерческих продуктах, и у вас, вероятно, уже есть программа, конвертирующая в MP4, если у вас есть видеоредактор. Если у тебя есть Adobe Premiere вы можете использовать Adobe Video Encoder или, если у вас есть QuickTime Pro, который тоже работает. Многие конвертеры, которые мы обсуждали на предыдущей странице, также конвертируют видео в MP4.

• MediaConvert: Онлайн-инструмент AWS.
• Конвертер видео Miro (Windows Macintosh): эта программа позволяет конвертировать как в Ogg, так и в MP4 (H.264), и имеет открытый исходный код.
• СУПЕР (Windows): конвертирует много разных типов файлов в MP4.
• Бесплатный конвертер видео: Мы думаем, что это версия для Windows и Macintosh, но по их сайту это было трудно сказать.

Добавьте элемент видео на свою веб-страницу

1. Создайте свою веб-страницу, как обычно:

2. Внутри корпуса поместите
3. Решите, какие атрибуты вы хотите, чтобы ваше видео было: мы рекомендуем использовать элементы управления и предварительную загрузку. Используйте вариант плаката, если в вашем видео нет хорошей первой сцены.
   автовоспроизведение - запускаться сразу после загрузки
4. элементы управления - позволяют вашим читателям управлять видео (пауза, перемотка назад, перемотка вперед)
5. цикл - запускать видео с начала, когда оно заканчивается
6. предварительная загрузка - предварительная загрузка видео, чтобы оно было готово быстрее, когда клиент нажимает на него
7. плакат - укажите изображение, которое вы хотите использовать, когда видео остановлено
8. Затем добавьте исходные файлы для двух версий вашего видео (MP4 и OGG) в папку
9. Откройте страницу в Chrome 1, Firefox 3.5, Opera 10 и / или Safari 4 и убедитесь, что она отображается правильно. Вы должны протестировать его как минимум в Firefox 3.5 и Safari 4, поскольку каждый из них использует свой кодек.

Вот и все. Когда у вас будет этот код, у вас будет видео, которое работает в Firefox 3.5, Safari 4, Opera 10 и Chrome 1. Но как насчет Internet Explorer?

HTML 5 очень просто использовать для добавления видео на веб-страницы. Большинство современных браузеров поддерживают видео HTML 5, хотя не все поддерживают его одинаково. Но это означает, что если вы сохраняете видео в форматах Ogg и MP4, вы можете написать всего четыре или пять строк HTML, чтобы оно отображалось в большинстве современных браузеров (кроме Internet Explorer 8). Вот как:

Напишите маркер документа HTML 5, чтобы браузеры знали, что нужно ожидать от HTML 5:

1. Создайте свою веб-страницу, как обычно:

2. Внутри корпуса поместите
3. Решите, какие атрибуты вы хотите, чтобы ваше видео было: мы рекомендуем использовать элементы управления и предварительную загрузку. Используйте вариант плаката, если в вашем видео нет хорошей первой сцены.
   автовоспроизведение - запускаться сразу после загрузки
4. элементы управления - позволяют вашим читателям управлять видео (пауза, перемотка назад, перемотка вперед)
5. цикл - запускать видео с начала, когда оно заканчивается
6. предварительная загрузка - предварительная загрузка видео, чтобы оно было готово быстрее, когда клиент нажимает на него
7. плакат - укажите изображение, которое вы хотите использовать, когда видео остановлено
8. Затем добавьте исходные файлы для двух версий вашего видео (MP4 и OGG) в папку
9. Откройте страницу в Chrome 1, Firefox 3.5, Opera 10 и / или Safari 4 и убедитесь, что она отображается правильно. Вы должны протестировать его как минимум в Firefox 3.5 и Safari 4, поскольку каждый из них использует свой кодек.

Вот и все. Когда у вас будет этот код, у вас будет видео, которое работает в Firefox 3.5, Safari 4, Opera 10, Internet Explorer 9+ и Chrome 1.

Тестируйте в максимально возможном количестве браузеров

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

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

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

Поскольку вы приложили все усилия, чтобы кодировать видео в нескольких форматах, вам следует протестировать его, чтобы убедиться, что оно отображается в нескольких браузерах. Это означает, что, как минимум, вы должны протестировать его в Firefox, Safari и IE.

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

Как заставить видео работать в старых браузерах

Как и в случае с любой другой веб-страницей, вы должны сначала подумать о том, насколько важно заставить эти браузеры работать. Если 90% ваших клиентов используют Netscape, у вас должен быть запасной план для них. Но если их будет меньше 1%, это может не иметь большого значения.

После того, как вы решили, какие браузеры вы собираетесь поддерживать, самый простой способ - просто создать для них альтернативную страницу для просмотра видео. На этой альтернативной странице вы можете встроить видео с помощью HTML 4. А затем либо используйте какую-либо форму обнаружения браузера, чтобы перенаправить их туда, либо просто добавьте ссылку на эту страницу на этой.