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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• Сначала вы используете тег , чтобы вставить видео на свою страницу. НО этот тег устарел в пользу другого тега. И некоторые браузеры так или иначе никогда не поддерживали это.
• Таким образом, вы переключаетесь на тег , но старые браузеры не поддерживают его, а новые браузеры отрывочны в его поддержке.
• Тогда вы думаете, 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. также есть ключи, необходимые для добавления поддержки других старых браузеров, если это необходимо.

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

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

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

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

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

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

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

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

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

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

Конвертировать видео в 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.

Конвертировать видео в FLV для Internet Explorer

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

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

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

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

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

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

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

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

Добавьте 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 (перед тегом) вы добавите строку:

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

Шаг 2. Убедите Internet Explorer прочитать теги HTML 5

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

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

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

Как и на предыдущей странице, вы добавите строку в HTML 5 внутри элемента, который указывает, где вы сохранили FLV-файл на вашем сервере.

Добавьте JavaScript и Flash Player, чтобы заставить Internet Explorer работать – часть 2

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

Шаг 4: Преврати элемент во вспышку

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

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

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

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

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

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

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

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

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

• Firefox 3.5
• Сафари 3 или 4
• Internet Explorer 7 или 8

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

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

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

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

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