WebDesignMagazine.ru – Журнал о веб-дизайне

Начало работы с HTML5 видео

0

Хотите создать свое собственное Twitch.tv приложение для livestreaming workhsl? Как насчет своей YouTube программы для воспроизведения ранее записанных видео? Вы могли бы использовать Flash, Java, или Silverlight в прошлом, но с Chrome 42, объявляющим, что эти плагины не поддерживаются, настало время HTML5.

До работы в Microsoft я был старшим инженером в команде по разработке продуктов Comcast, где я работал над видеоплеерами для ряда платформ, включая сеть, Xbox One, Xbox 360, и SmartGlass. Это стало для меня хорошим опытом в видео технологии, и я рад, что могу учить других многому из того, что я узнал там.

Это первая из серии статей об использовании Azure Media Services для создания и использования HTML5 видео. В этом уроке я объясню, как использовать это разрешение cloud media, чтобы получить настройку и начать экспериментировать с доставкой live или on demand video.

Примеры видео форматов

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

Адаптивное потоковое вещание делит видео на маленькие кусочки. “Адаптивная” часть это то, что видео кодируется в нескольких битрейтах и разрешениях, создающих кусочки разных размеров. Оттуда можно выбирать между различными битрейтами/разрешениями и адаптироваться к большим или меньшим кускам автоматически, в зависимости от состояния сети.

Скотт Хансельман описывает его также: “Вы должны увидеть это, чтобы понять, но на самом деле вся мудрость этого заключена в простоте. Некоторые люди волнуются, когда принимают, скажем, видео файл 200 мегабайт и кодируют его для Smooth Streaming и в результате каталог, скажем, весит 500 мегабайт. На самом деле, меньшее отправляется по проводам, чем существует на диске. Идея заключается в том, что Smooth Streaming создает “шаги” битрейтов. Он кодирует и хранит файловые битрейты на диске”.

1429668931HTML5vid-02-DJ-track-mixing

Progressive MP4

Обзор Adobe.com

Это загружает и кэширует видео на компьютере. Требуется короткий период времени, чтобы отправить в буфер и кэш начало медиа-файла до того, как он начнет воспроизводиться. После того, как видео отправилось в кэш, последующий просмотр не требует буферизации. Использование стандартного протокола HTTP, постепенно загруженных файлов, как правило, поставляются через content delivery network (CDN). Таким образом, ваш видео плеер создает прямое соединение HTTP с серверами CDN (Azure) для извлечения содержимого.

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

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

HLS

Обзор streamingmedia.com

HTTP Live Streaming (HLS) принадлежит Apple, и работает на основе идеи адаптивного потокового вещания и обычно выполняется в 10 секундные куски. Кроме того, он работает на контент video on demand тоже. Он поддерживает live и on-demand video.

Smooth Streaming

Обзор RBGnetworks.com

Это было объявлено в октябре 2008 года в рамках Silverlight, и особенность Internet Information Services (IIS) Media Services, интегрированной HTTP-платформы доставки информации.

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

Низкие веб-затраты на инфраструктуру, совместимость firewall и переключение битрейтов лишь некоторые из преимуществ адаптивной потоковой передачи.

MPEG Dash

Обзор Streamingmedia.com.

Большая отличительная с DASH, что это международный стандарт, который в настоящее время контролируется Motion Picture Experts Group (MPEG) вместо контролирования Microsoft (Smooth Streaming) или Apple (HLS). Несколько компаний приняли участие в создании и стандартизации MPEG DASH, в том числе Microsoft, Apple, Netflix, Qualcomm, Ericsson, Samsung и многие другие.

Мы видим в MPEG-DASH возможную замену для всех функций, которые мы ввели и реализованных в последние годы с Smooth Streaming. Со временем мы представим некоторые интересные функции.

Поддержка HTML5 видео

Видео тег ( был в HTML5 в течение нескольких лет, и все современные браузеры поддерживают его. Video For Everybody Test Page иллюстрирует его использование в ясных условиях.

1429771205caniuse-video

Таблица поддержки браузеров для тега

Вот легко добавить его на свою страницу:

Вы, вероятно, пользуетесь этим каждый день. Netflix привык полагаться на Silverlight, как на видео-плеер, но в настоящее время он работает на HTML5 видео. YouTube ранее работал на Flash, но теперь большая часть его контента обслуживается при помощи HTML5. Видели видеоплееры на Xbox One (YouTube, Xbox Video, Netflix и т.д.)? Да, это все HTML5.

Намного проще проверить HTML5 видео во всех браузерах, особенно на различных версиях Internet Explorer и новом проекте Spartan. Чтобы сделать это, вы можете получить бесплатно virtual machines или удаленно протестировать на Mac, iOS, Android, или Windows.

1429668923HTML5vid-04-Netflix-on-HTML5

Замечание о плеерах

Существует много плееров. В этом уроке я использую Azure Media Services Player, так как он хорош для начала работы, для понимания работы потоковой передачи медиа. Он включает в себя ряд образцов видео, простое выпадающее меню, где можно выбрать различные форматы и посмотреть уровень защиты каждого из них.

Он обеспечивает поддержку различных форматов из коробки, в том числе:

  • Smooth Streaming
  • MPEG Dash
  • HLS
  • Progressive MP4

1429668918HTML5vid-05-Azure-media-streaming-options

Лучше всего то, что вам даже не нужно создавать свой собственный плеер или страницу, чтобы проверить любой из видео контента. Просто измените URL на ваш контент.

Вы также можете посмотреть фреймворк с открытым исходным кодом video.js. Он похож на Microsoft player (ниже), но также предлагает разные опции. Они также имеют отличный skin designer. Однако если вы менее знакомы с современным CSS, не будем об этом говорить.

1429668913HTML5vid-06-videojs

Создание собственного видео плеера

Есть несколько плеер фреймворков, которые мы можем использовать, но для простоты, давайте возьмем плеер HTML5, предоставленный Microsoft. Вы можете найти документацию по нему здесь. Здесь также есть рабочий образец.

Вот некоторые из его преимуществ:

HTML5 плеер фреймворк обеспечивает последовательный видео опыт для браузера. Это достигается путем определения поддержки различных технологий видеоплеера (например, видео тег HTML5, Silverlight и т.д.), а затем обеспечением того же интерфейс программирования JavaScript и тем же набором элементов управления независимо от используемой технологии. Это будет итерировать список резервных технологий видеоплеера, пока есть поддерживаемая технология.

Что дальше? Встроить браузер. Упаковать приложение

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

После этого мы установим аккаунт Azure и создадим наш первый Media Services контент, который мы можем воспроизвести на нашем недавно созданном видео плеере. Если вы хотите начать прямо сейчас, вы можете зарегистрироваться для бесплатной пробы Azure и Visual Studio Community (ныне бесплатный IDE) или узнать информацию о том, как получить аккаунт BizSpark.

Узнайте больше о Azure Media Services

Вот некоторые ресурсы, которые помогут узнать больше о медиа, Azure и как быстро получить настройки:

  • Azure Media Services 101 — Azure Fridays (Channel 9)
  • Getting started with Azure Media Services (video)
  • Dynamic Packaging with Azure Media Services

Или серии уроков нашей команды по HTML, CSS и JS:

  • Practical Performance Tips to Make your HTML/JavaScript Faster (7 серий от адаптивного дизайна до случайных игр для оптимизации производительности)
  • The Modern Web Platform JumpStart (основы HTML, CSS и JS)
  • Developing Universal Windows App with HTML and JavaScript JumpStart (использование JS для создания приложение)
Поделиться: