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

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

1474

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

 

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

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

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

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

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

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

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

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 видео

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

Таблица поддержки браузеров для тега <video> на caniuse.com

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


<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
Fallback content: Your browser does not support the video tag.
</video>

1234

<video width=»320″ height=»240″ controls>  <source src=»movie.mp4″ type=»video/mp4″>  Fallback content: Your browser does not support the video tag.</video>

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

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

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

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

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

  • Smooth Streaming
  • MPEG Dash
  • HLS
  • Progressive MP4

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

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

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

Есть несколько плеер фреймворков, которые мы можем применять, но для простоты, давайте возьмем плеер 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 для создания приложение)

www.webdesignmagazine.ru