Поделиться через

Полная настройка проигрывателя мультимедиа Azure

  • Статья

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

Шаг 1. Включение файлов JavaScript и CSS в голову страницы

С помощью проигрывателя мультимедиа Azure вы можете получить доступ к скриптам из размещенной версии CDN. Часто рекомендуется поместить JavaScript перед тегом конечного текста <body> вместо <head>, но проигрыватель мультимедиа Azure включает в себя html5 Shiv, который должен находиться в голове для старых версий IE, чтобы уважать тег видео как допустимый элемент.

Заметка

Если вы уже используете HTML5-код, например модернизатор, вы можете включить JavaScript проигрывателя мультимедиа Azure в любом месте. Однако убедитесь, что версия модернизатора включает в себя шив для видео.

Версия CDN

    <link href="//amp.azure.net/libs/amp/latest/skins/amp-default/azuremediaplayer.min.css" rel="stylesheet">
    <script src= "//amp.azure.net/libs/amp/latest/azuremediaplayer.min.js"></script>

Важный

Вы должны НЕ использовать версию latest в рабочей среде, так как это может быть изменено по запросу. Замените latest версией проигрывателя мультимедиа Azure. Например, замените latest2.1.1. Версии проигрывателя мультимедиа Azure можно запрашивать из здесь.

Заметка

Так как выпуск 1.2.0 больше не требуется включать расположение в резервные технологии (он автоматически выбирает расположение из относительного пути файла azuremediaplayer.min.js). Вы можете изменить расположение резервных технологий, добавив следующий сценарий в <head> после приведенных выше скриптов.

Заметка

Из-за характера подключаемых модулей Flash и Silverlight файлы swf и xap должны размещаться в домене без конфиденциальной информации или данных. Это автоматически отвечает за вас с размещенной версией Azure CDN.

    <script>
      amp.options.flashSS.swf = "//amp.azure.net/libs/amp/latest/techs/StrobeMediaPlayback.2.0.swf"
      amp.options.silverlightSS.xap = "//amp.azure.net/libs/amp/latest/techs/SmoothStreamingPlayer.xap"
    </script>

Шаг 2. Добавление тега видео HTML5 на страницу

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

  1. Атрибут <data-setup> в <video> сообщает Проигрывателю мультимедиа Azure автоматически настроить видео при готовности страницы и прочитать любой (в формате JSON) из атрибута.
  2. Атрибут id: следует использовать и уникален для каждого видео на одной странице.
  3. Атрибут class содержит два класса:
    • azuremediaplayer применяет стили, необходимые для функций пользовательского интерфейса проигрывателя мультимедиа Azure
    • amp-default-skin применяет кожу по умолчанию к элементам управления HTML5
  4. <source> включает два обязательных атрибута
    • src атрибут может включать файл *.ism/manifest из служб мультимедиа Azure, проигрыватель мультимедиа Azure автоматически добавляет URL-адреса для DASH, SMOOTH и HLS в проигрыватель.
    • type атрибут является обязательным типом MIME потока. Тип MIME, связанный с .ism/manifest"application/vnd.ms-sstr+xml"
  5. необязательный атрибут<data-setup> в <source> сообщает Проигрывателю мультимедиа Azure, если существуют какие-либо уникальные политики доставки для потока из служб мультимедиа Azure, включая, но не ограничивается типом шифрования (AES или PlayReady, Widevine или FairPlay) и маркером.

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

    <video id="vid1" class="azuremediaplayer amp-default-skin" autoplay controls width="640" height="400" poster="poster.jpg" data-setup='{"techOrder": ["azureHtml5JS", "flashSS", "html5FairPlayHLS","silverlightSS", "html5"], "nativeControlsForTouch": false}'>
        <source src="http://amssamples.streaming.mediaservices.windows.net/91492735-c523-432b-ba01-faba6c2206a2/AzureMediaServicesPromo.ism/manifest" type="application/vnd.ms-sstr+xml" />
        <p class="amp-no-js">
            To view this video please enable JavaScript, and consider upgrading to a web browser that supports HTML5 video
        </p>
    </video>

По умолчанию большая кнопка воспроизведения расположена в верхнем левом углу, чтобы она не закрывала интересные части плаката. Если вы предпочитаете центрировать большую кнопку воспроизведения, можно добавить дополнительные amp-big-play-centeredclass в элемент <video>.

Альтернативная настройка динамической загрузки HTML

Если веб-страница или приложение динамически загружает тег видео (ajax, appendChild и т. д.), чтобы она не существовала при загрузке страницы, необходимо вручную настроить проигрыватель, а не полагаться на атрибут установки данных. Для этого сначала удалите атрибут установки данных из тега, чтобы не было путаницы при инициализации проигрывателя. Затем запустите следующий Код JavaScript через некоторое время после загрузки JavaScript проигрывателя мультимедиа Azure и после загрузки тега видео в DOM.

    var myPlayer = amp('vid1', { /* Options */
            techOrder: ["azureHtml5JS", "flashSS", "html5FairPlayHLS","silverlightSS", "html5"],
            "nativeControlsForTouch": false,
            autoplay: false,
            controls: true,
            width: "640",
            height: "400",
            poster: ""
        }, function() {
              console.log('Good to go!');
               // add an event listener
              this.addEventListener('ended', function() {
                console.log('Finished!');
            });
          }
    );
    myPlayer.src([{
        src: "http://samplescdn.origin.mediaservices.windows.net/e0e820ec-f6a2-4ea2-afe3-1eed4e06ab2c/AzureMediaServices_Overview.ism/manifest",
        type: "application/vnd.ms-sstr+xml"
    }]);

Первым аргументом в функции amp является идентификатор тега видео. Замените его собственным.

Второй аргумент — это объект options. Он позволяет задать дополнительные параметры, такие как можно с помощью атрибута установки данных.

Третий аргумент — это обратный вызов "готово". После инициализации проигрывателя мультимедиа Azure вызовет эту функцию. В готовом обратном вызове объект "этот" относится к экземпляру проигрывателя.

Вместо использования идентификатора элемента можно также передать ссылку на сам элемент.


    amp(document.getElementById('example_video_1'), {/*Options*/}, function() {
        //This is functionally the same as the previous example.
    });
    myPlayer.src([{ src: "//example/path/to/myVideo.ism/manifest", type: "application/vnd.ms-sstr+xml"]);