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

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

• Хостинг собственного видео HTML5 против использования YouTube
• Краткий обзор поддержки видео в Интернете
• Создание и редактирование видео
• Преобразование видео в Ogg для Firefox
• Конвертировать видео в MP4 для Safari
• Преобразование видео в FLV для Internet Explorer
• Добавление видеоэлемента в вашу веб-страницу
• Добавьте JavaScript и Flash Player для работы Internet Explorer
• Тест во многих браузерах, как вы можете

01 из 10

Хостинг вашего собственного видео HTML 5 против использования YouTube

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

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

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

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

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

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

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

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

Конечно, видео HTML5 предлагает некоторые недостатки

Они включают:

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

Продолжить чтение ниже

02 из 10

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

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

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

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

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

Продолжить чтение ниже

03 из 10

Создание и редактирование видео

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

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

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

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

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

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

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

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

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

04 из 10

Преобразование видео в 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 Video Converter (Windows Macintosh) - Эта программа имеет преимущество преобразования как Ogg, так и MP4 (H.264), и это с открытым исходным кодом.
• Конвертер видео Koyote (Windows)
• Бесплатный видео конвертер Мы считаем, что у него есть как Windows, так и версия для Macintosh, но было сложно сказать с их сайта
• Простой Theora Encoder (Macintosh) - это тот, который мы склонны использовать.

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

Продолжить чтение ниже

05 из 10

Конвертировать видео в MP4 для Safari

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

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

• MediaConvert - онлайн-инструмент AWS.
• Miro Video Converter (Windows Macintosh) - Эта программа имеет преимущество преобразования как Ogg, так и MP4 (H.264), и это с открытым исходным кодом.
• SUPER (Windows) - преобразует много разных типов файлов в MP4 и FLV
• Бесплатный видео конвертер Мы думаем, что это как Windows, так и версия для Macintosh, но было сложно сказать с их сайта.

Сохраните файл MP4 на свой веб-сайт, а затем вам нужно будет преобразовать его в Flash для использования в Internet Explorer.

06 из 10

Преобразование видео в FLV для Internet Explorer

Самый простой способ конвертировать видео в FLV - это использование самой Flash. Так мы конвертируем видео в Flash. Но если у вас нет Flash, вот два популярных инструментария для преобразования файлов в FLV:

• SUPER (Windows) - преобразует много разных типов файлов в MP4 и FLV
• ffmpegX (Macintosh) - преобразует много разных типов файлов в Mp4 и FLV.

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

Продолжить чтение ниже

07 из 10

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

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

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

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

2. Внутри тела поместите
3. Определите, какие атрибуты вы хотите иметь в своем видео: мы рекомендуем использовать элементы управления и предварительно загружать. Используйте опцию плаката, если ваше видео не имеет хорошей первой сцены.
   1. автовоспроизведение - запуск сразу после его загрузки
   2. элементы управления - позволяют вашим читателям управлять видео (пауза, перемотка назад, перемотка вперед)
   3. loop - запуск видео с самого начала, когда он заканчивается
   4. preload - предварительно загрузить видео, чтобы он был готов быстрее, когда клиент нажимает на него
   5. плакат - определение изображения, которое вы хотите использовать, когда видео остановлено
4. Затем добавьте исходные файлы для двух версий вашего видео (MP4 и OGG) внутри
5. Откройте страницу в 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?

Internet Explorer не нравится HTML 5 или

В следующем разделе мы поговорим о том, что вы можете сделать, чтобы IE 8 отлично поработал с вашими тегами HTML 5 и отобразил видео. Вы должны использовать Flash.Хорошей новостью является то, что ожидается, что IE 9 будет поддерживать HTML 5 и тег видео.

08 из 10

Добавьте JavaScript и Flash Player для работы Internet Explorer

Возможно, вы заметили, что в HTML-странице предыдущей страницы не было исходной строки для FLV-файла. И если вы проверили эту страницу в Internet Explorer, это не сработало. Это связано с тем, что Internet Explorer не распознает HTML 5 и не может воспроизводить видео OGG или MP4 изначально. Чтобы заставить Internet Explorer 7 и 8 работать, вам нужно, чтобы он воспроизводил видео как Flash. Но есть больше шагов, чтобы заставить его работать, чем просто добавлять FLV-файл.

Шаг 1. Получите Flash Video Player для вашего сайта.

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

Следуйте инструкциям на сайте FlowPlayer, чтобы установить FlowPlayer на свой веб-сайт. В двух словах, вы будете устанавливать на вашем сайте 2 SWF-файла и файл JavaScript. В нижней части вашего HTML, (до tag) вы добавите строку:

Но Internet Explorer по-прежнему не будет воспроизводить видео, вам нужно научить его распознавать теги HTML 5.

Шаг 2: Убедите Internet Explorer в чтении HTML 5 тегов

В Google Code под названием «HTML Shiv» есть удобный скрипт, который поможет IE распознать элементы HTML 5. Поэтому в вашего HTML-документа, на который вы хотите ссылаться. Лучше всего заключить его в условные комментарии IE, чтобы другие браузеры не путались:

Хорошо, теперь IE узнает

Шаг 3. Добавление исходной строки для файла FLV.

Как и на предыдущей странице, вы добавите строку в свой HTML 5 внутри

Продолжить чтение ниже

09 из 10

Добавьте JavaScript и Flash Player для работы Internet Explorer - Часть 2

К сожалению, мы все еще не закончили. Теперь мы должны сказать IE, чтобы использовать проигрыватель FlashPlayer Flash Player, на который мы ссылались выше.

Шаг 4: Поверните

Для этого нам нужен другой скрипт. Мы получили скрипт от Dive Into HTML 5. Но когда мы его протестировали, это не сработало, пока мы не выполнили пару настроек:

• Вокруг строки 31: добавьте местоположение вашей установки FlowPlayer.
• Вокруг строки 42: измените тип файла с видео / mp4 на видео / x-flv
• Вокруг строки 94: начиная с if (!! $ && !! $ (document) .ready) {до конца документа измените этот раздел следующим образом:

  // if (!! $ && !! $ (document) .ready) {/ * Пользователи jQuery могут инициализировать, как только DOM готов * /// $ (document) .ready (html5_video_init);//} else {/ * Все остальные могут подождать до загрузки * // * addEvent через http://www.ilfilosofo.com/blog/2008/04/14/addevent-preserving-this/ * /var addEvent = function (obj, type, fn) {if (obj.addEventListener)obj.addEventListener (тип, fn, false);else if (obj.attachEvent)obj.attachEvent ('on' + type, function () {return fn.apply (obj, new Array (window.event));});}addEvent (окно, «load», html5_video_init);//}

После того как вы отредактировали файл JavaScript, загрузите его на свой сервер и привяжите к нему в нижней части страницы HTML (до ):

Уф! Теперь, когда вы сделали все это, вы должны загрузить свой HTML, чтобы начать тестирование.

10 из 10

Тест во многих браузерах, как вы можете

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

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

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

• Firefox 3.5
• Safari 3 или 4
• Internet Explorer 7 или 8

Вы можете протестировать Chrome, но поскольку Chrome будет просматривать все три метода (даже Flash, если у вас есть плагин), трудно сказать, есть ли проблема с одним из двух других или с каким кодеком Chrome используется.

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

Получение видео в старых браузерах

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

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