Коммерческая медиа-индустрия проходит через большую трансформацию по мере того, как контент-провайдеры отходят от модели доставки контента с использованием закрытых веб-плагинов (таких, как Flash или Silverlight) и заменяют их едиными бесплагинными видео-плеерами, базирующимися на спецификациях HTML5 и возможностях проигрывания коммерческого контента. Браузеры также двигаются в сторону от использования плагинов, так Chrome отказывается от NPAPI и Microsoft Edge от ActiveX в пользу более защищенных моделей расширения.

Переход к модели проигрывания медиа-контента без использования плагинов становится возможным благодаря недавно разработанным новым спецификациям:

• Со стороны W3C: Media Source Extensions для адаптивного стриминга и Encrypted Media Extensions для защиты контента.
• Со стороны Moving Picture Experts Group (MPEG): DASH и Common Encryption (CENC).

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

Это длинная статья, и мы бы не хотели, чтобы вы упустили интересующую вас тему. Вот краткое содержание:

• Некоторая информация о Microsoft Edge и Silverlight
• Обзор состояния совместимых веб-медиа
• Сложности и варианты их преодоления
  • Простой вариант DASH-стриминга
  • Демонстрация веб-сайта, использующего библиотеку для проигрывания адаптивного контента
  • Сервисы Azure Media Services, которые могут вам помочь
  • Простой способ создания приложения под универсальную Windows-платформу (UWP) на базе кода веб-сайта
  • Демонстрация UWP-приложения с интеграцией проигрывания видео и голосовых команд для Кортаны

Microsoft Edge и Silverlight

Поддержка ActiveX была исключена при разработке Microsoft Edge и это включает удаление поддержки Silverlight. Причины этого обсуждались в одной из прошлых статей и включают эволюцию доступных и защищенных медиа-решений, базирующихся на расширениях HTML5. Microsoft продолжает поддерживать Silverlight, вне-браузерные приложения на Silverlight продолжают работать. Также Silverlight по-прежнему будет поддерживаться в Internet Explorer 11, так что сайты с Silverlight могут работать и в Windows 10. В то же время мы призываем компании, использующие Silverlight для медиа-контента переходить на движки, использующие DASH/MSE/CENC/EME, и внедрять единый процесс защиты контента на базе CENC. Это открывает путь к наиболее широкой совместимости между браузерами, платформами, контентом и устройствами.

Совместимость Media-контента между браузерами

Плагины вроде Silverlight должны были обеспечить совместимости проигрывания медиа-контента за счет наличия версии плагина для различных браузеров. Это сильно осложнилось по мере увеличения количества устройств и платформ с браузерами. Сегодня, так как старая модель с плагинами сходит со сцены, ей необходима замена. Для медиа-контента подходящей сменой может быть решение, опирающееся на DASH, MSE, EME и CENC.

Windows 10 и Microsoft Edge поддерживают DASH, MSE, EME и CENC нативно, другие браузеры также внедряют поддержку MSE и EME, совместимую с CENC. Это позволяет разработчикам создавать приложения с поддержкой видео без использования плагинов, работающие на большом спектре устройств и платформ, в которых реализация MSE/EME может быть сделана поверх разных цепочек проигрывания видео и защиты контента.


DRM-провайдеры могут отличаться в разных браузерах

В наши дни, когда DRM-системы используют проприетарные форматы файлов и методы шифрования, такая вариативность в DRM-провайдерах в браузерах может быть критичной проблемой. Благодаря разработке и внедрению общего шифрования (Common Encryption, CENC), проблема существенно сглаживается, так как файлы сжимаются в стандартных форматах и шифруются с использованием глобальных индустриальных стандартов. Сервис-провайдеры выдают ключи и лицензии, необходимые для потребления контента в конкретном браузере, но код веб-сайта, контент и ключи шифрования являются общими между ними, независимо от используемого средства DRM. Примером такой реализации является DASH.js, референсный индустриальный плеер с открытым кодом, используемый для демонстрации данных технологий и служащий основной для многих плееров, внедряемых сегодня в вебе.

Как следует из схемы выше, PlayReady DRM от Microsoft поддерживает две модели DRM-защиты: «программная DRM», использующая традиционный программный путь защиты медиа-контента, и «аппаратная DRM», использующая возможности железа для защиты, если соответствующая опция поддерживается устройством. Аппаратная DRM была спроектирована для удовлетворения требованиям защиты коммерческого медиа-контента и позволит стриминг контента в самом высоком доступном качестве. Не все устройства будут поддерживать аппаратную защиту, но сайты, использующие MSE/EME, могут подстраиваться под разницу и отдавать контент в наилучшем доступном качестве в зависимости от браузера или устройства.

Поддержка со стороны Microsoft

Как и с любой другой новой технологией, переход к стеку DASH/MSE/EME/CENC может быть непростым. Возможные сложности включают:

• MSE работает за счет разрешения JavaScript-клиенту отсылать один или более sourceBuffer в качестве источника для медиа-элемента и динамически загружать и присоединять медиа-фрагменты к sourceBuffer. Это предоставляет сайтам точный контроль над опытом пользователя, но также требует заметных инвестиций в разработку сайта.
• Большие существующие библиотеки медиа-контента были закодированы в форматах, не поддерживаемых напрямую в MSE/EME. Такие библиотеки надо либо поддерживать некоторым образом через новые API, либо перекодировать. Примером такого формата может быть Silverlight Smooth Streaming, который использовался сайтами с Silverlight-плагинами. Решение, которое могло бы проигрывать такой контент напрямую, было бы полезным для любой технологии, замещающей Silverlight.
• MSE/EME взрослеют, но все еще претерпевают изменения, которые могут влиять на совместимость с разными медиа-форматами и между браузерами.

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

DASH Type 1: MSE стал проще

DASH-контент обычно состоит из медиа-файлов, закодированных в разных уровнях качества, и манифеста, предоставляющего информацию о файлах медиа-приложению. MSE-плеер далее отвечает за парсинг таких файлов, загрузку наиболее подходящего контента и отправку в sourceBuffer(ы) медиа-элемента. Это очень гибкое решение, которое, однако, требует инвестиций в разработку реализации MSE на сайте или использования готовой реализации MSE, например, упомянутой библиотеки DASH.js.

Есть также другой более простой вариант: нативный DASH-стриминг, при котором код сайта просто говорит, что манифест является источником для медиа-элемента, а проигрыватель автоматически управляется встроенным в браузер движком стриминга. Такой подход позволяет веб-разработчикам пользоваться опытом и инвестициями, сделанными разработчикам браузеров, и с легкостью предоставлять премиальный контент на своих сайтах. Мы добавили нативную поддержку DASH-стриминга в Windows 10 и Microsoft Edge, дополнительные детали доступны в предыдущей статье: "Simplified Adaptive Video Streaming: Announcing support for HLS and DASH in Windows 10".

DASH-библиотека на JavaScript, которая проигрывает Smooth-контент

Часть веб-сайтов имеют большие библиотеки медиа-контента, закодированного в формат Smooth Stream, и ищет способы перейти к совместимому решению на HTML5. Одним из возможных путей является использование js-библиотеки, которая поддерживала бы текущий контент через MSE/EME без необходимости перекодирования. Сегодня такие библиотеки доступны, например, есть версия библиотеки “hasplayer.js”, которая делает именно это и выложена на GitHub.

Данная библиотека базируется на dash.js и позволяет проигрывать как чистый, так и защищенный Smooth-контент с использованием PlayReady в Microsoft Edge. Это клиентская JavaScript-библиотека, которая транслирует необходимым образом контент и манифест и при этом является совместимой с другими браузерам. Благодаря включению полифила для поддержки EME, она может быть легко расширена для поддержки DRM-решений из других браузеров.

Ниже пример кода на JavaScript, который использует hasplayer.js для запроса и проигрывания DASH- или Smooth-медиа файла:

function setupVideo(url) {
  var context = new Custom.di.CustomContext();
  var player = new MediaPlayer(context);
  player.startup();
  player.attachView(document.querySelector('#videoplayer'));
  player.setAutoPlay(true);
  player.attachSource(url);
}

Это существенным образом облегчает поддержку стриминга Smooth-контента на сайте. Мы сделали пример “Contoso Video” в репозитарии на GitHub, использующий эту библиотеку для проигрывания видео. Мы можете попробовать его сами на демо-сайте Contoso Video.


• Рендеринг в Microsoft Edge
• Chakra JavaScript Engine
• HTML/CSS/JS с сервера

Библиотека для трансляции Smooth Streaming контента на стороне клиента возможна вследствие того, что формат PIFF (Protected Interoperable File Format), лежащий в основе протокола Smooth Streaming, был положен в основу спецификации для формата ISOBMFF (ISO Base Media File Format), используемого в DASH, и также из-за того, что PIFF предлагает мульти-DRM протокол, который был стандартизирован как ISO MPEG Common Encryption (CENC).

Сегодня широко распространены сегодня: PIFF 1.1 и PIFF 1.3 – и библиотека hasplayer.js для Smooth-стриминга в MSE/EME поддерживает оба формата. Библиотека на лету преобразует из формата PIFF в формат CMF (Common Media Format), используемый с DASH. Это позволяет быть уверенным в том, что весь контент, проигрываемый библиотекой в браузере, соответствует DASH CMF и может проигрывать во всех браузерах, поддерживающих MSE.

Медиа-сервисы

Некоторые владельцы контента предпочитают сфокусироваться на производстве качественного материала, а не технических деталях доставки контента до зрителей. Таки компании могут воспользоваться сервисами хостинга медиа-контента, которые подготавливают его для веб-доставки, управляют логикой стриминга и UI плеера, а также управляют серверами с DRM-лицензиям. Azure Media Services предлагает такие возможности сегодня, включая поддержку как PlayReady, так и Widevine DRM систем. Этот сервис предоставляе поддержку для видео по запросу (Video on Demand, VoD) и живого стриминга (live streaming). В Azure подается единый файл/поток в высоком качестве, а далее он берет на себя динамические сжатие и шифрование в CENC-защищенный контент, которые может передаваться на конечные устройства. Также для разработчиков доступно готовое решение с плеером для вставки на ваш сайта. Некоторые детали этого сервиса были недавно анонсированы в статье “Azure Media Services delivers Widevine encrypted stream by partnering with castLabs”.

Хостящиеся веб-приложения

Еще одно большое преимущество перехода на стриминг с помощью DASH/MSE/EME/CENC заключается в том, что тот же самый код, что работает на вашем сайте, может быть упакован в приложение для универсальной Windows-платформы (UWP). UWP-приложения могут работать на всех устройствах с Windows 10. Другими словами, разработчик веб-сайта может создать совместимый с разными браузерами плеер на сайте и Windows-приложение, использующее этот же код. Общий код будет управлять UI и разбираться с деталями медиа-стриминга и(!) также сможет воспользоваться возможностями, доступными только приложениям через WinRT API:

Такие хостящиеся веб-приложения:

• Предлагаются через Windows Store
• Могут взаимодействовать с Cortana (“Contoso Video play elephants”)
• Могут отсылать уведомления (“Показ финала NBA начнется через 15 минут”)
• Имеют доступ к расширенной поддержке адаптивного стриминга
• Имеют доступ к улучшенной защите контента для проигрывания в Full HD и Ultra-HD
• Могут обновлять живые плитки
• И многое другое!

Мы рассказывали о возможностях хостящихся приложений в нашем докладе “Hosted web apps and web platform innovations” на Microsoft Edge Web Summit 2015. Вы также можете найти подробности в документации на MSDN.

Демонстрация хостящегося приложения

Мы взяли демонстрационный сайт Contoso Video, упомянутый выше, и упаковали его в виде UWP приложения, использующего возможности API Windows-платформы. Эта демонстрация показывает, насколько просто взять базовый видео-плеер и интегрировать в него голосовые команды через Кортану. Пример также настраивает цвета панели с заголовком приложения. Весь JavaScript-код является часть HTML-сайта, который развернут с использованием стандартных для веб-разработчиков процедур.


• Сохраняется рендеринг от Microsoft Edge
• Сохраняется Chakra – JavaScript-движок
• HTML/CSS/JS-код загружается с сервера или локально
• Добавлен доступ к нативным Windows APIs
• Доступно через каталог Windows Store

Для интеграции Кортаны в хостящееся веб-приложение (Hosted Web App, HWA) нужны три файла: файл Voice Command Definition (VCD) и по одному файлу на JS и HTML.

Файл Voice Command Definition (VCD)

VCD-файл определяет действия, которые вы хотите поддерживать через голосовые команды. Код ниже информирует Кортану об имени приложения (Contoso Video), поддержке команды “play” и как состояние “playing” должно отображаться в UI приложения.

<?xml version="1.0" encoding="utf-8"?>
<VoiceCommands xmlns="http://schemas.microsoft.com/voicecommands/1.2">
  <CommandSet xml:lang="en-us" Name="ContosoVideo">
    <CommandPrefix>Contoso Video</CommandPrefix>
    <!-- Example text displayed in Cortana UI -->
    <Example>Contoso video play elephants</Example>
    <!-- Command name -->
    <Command Name="play">
      <Example>play {message} using contoso video</Example>
      <!-- Tell Cortana what to listen for -->
      <ListenFor RequireAppName="BeforeOrAfterPhrase">please play {streamSubject}</ListenFor>
      <!-- Tell Cortana what to display in the UI -->
      <Feedback>playing {streamSubject} with Contoso Video</Feedback>
      <Navigate Target="/playStream.htm"/>
    </Command>
    <!-- Specifies a topic for large vocabulary recognition -->
    <PhraseTopic Label="streamSubject" Scenario="Dictation"></PhraseTopic>
  </CommandSet>
</VoiceCommands>

Файл JavaScript

JavaScript-код должен слушать событие активации и проверять голосовые команды VoiceCommand.

// Handle Cortana activation adding the event listener before DOM
// Content Loaded parse out the command type and call the 
// respective game APIs

if (typeof Windows !== 'undefined') {
    console.log("Windows exists!");
    // Subscribe to the Windows Activation Event
    Windows.UI.WebUI.WebUIApplication.addEventListener("activated", function (args) {
        var activation = Windows.ApplicationModel.Activation;
        // Check to see if the app was activated by a voice command
        if (args.kind === activation.ActivationKind.voiceCommand) {
            var speechRecognitionResult = args.result;
            var textSpoken = speechRecognitionResult.text;
            // Determine the command type {play} defined in vcd
            if (speechRecognitionResult.rulePath[0] === "play") {
                // Determine the stream name specified
                if (textSpoken.includes('elephants') || textSpoken.includes('Elephants')) {      
                // Movie selected is Elephants Dream
                    setupVideo("http://amssamples.streaming.mediaservices.windows.net/b6822ec8-5c2b-4ae0-a851-fd46a78294e9/ElephantsDream.ism/manifest(filtername=FirstFilter)");
                }
                else if (textSpoken.includes('Steel') || textSpoken.includes('steel')) {
                    // Stream selected is Tears of Steel
                    setupVideo("http://amssamples.streaming.mediaservices.windows.net/bc57e088-27ec-44e0-ac20-a85ccbcd50da/TearsOfSteel.ism/manifest");
                }
                else {
                    // No stream specified by user
                    console.log("No valid stream specified");
                }
            }
            else {
                // No valid command specified
                console.log("No valid command specified");
            }
        }
    });
}

Файл HTML

В HTML-файле нужно добавить мета-элемент, указывающий на VCD-файл на вашем сервере.

<!DOCTYPE html>
<html>
<head>
    <title>Adaptive Streaming in HTML5</title>
    <meta name="msapplication-cortanavcd" content="http://localhost:3000/VCD/vcd.xml" />
    <link href="./styles.css" rel="stylesheet" />
</head>
<body>
    <!-- Create centered Video player with controls -->
    <div class="center videoPlayer">
        <h1>Contoso Video</h1>
        <video id="videoplayer" controls></video>
    </div>

    <!-- Scripts: load last -->
    <script src="./js/hasplayer.min.js"></script>
    <script src="./js/windows.js"></script>
    <script src="./js/player.js"></script>
    <script src="./js/cortana.js"></script>
</body>
</html>

С добавлением VCD-файла и обновлениями HTML и JS файлов на сайте, наш пример Contoso Video теперь может быть упакован как UWP-приложение, которое будет работать на всех устройствах с Windows 10. Причем пользователи могут запускать приложение на проигрывание видео, сказав, например, “Contoso, play Tears of Steel”. Кортана распознает команду, запустит приложение Contoso Video и начнет проигрывание видео “Tears of Steel”.


Contoso Video в Кортане


Contoso Video в меню приложений

Полные исходники примеров сайта и приложения Contoso Video доступны в репозитории Contoso Video Sample на GitHub.

Заключение

Совокупность DASH/MSE/EME/CENC предлагает замену решениям, базирующимся на плагинах. Мы быстро движемся к достижению широкой совместимости в проигрывании медиа-контента. От этой трансформации выиграют как поставщики контента, так и зрители. Хотя адаптация технологий может вызывать затруднения в коротко-срочном периоде, возможности и варианты решения, которые мы обсуждали в этой статье, призваны помочь компаниям преодолеть эти сложности.

Будем рады услышать ваши отзывы, чтобы мы могли продолжать улучшать решения по стримингу медиа-контента и инструменты и подходы, о которых мы рассказывали. Пишите нам в твиттер @MSEdgeDev.