Интеграция DRM-систем с плеером Videojs

Содержание статьи:

Videojs + Widevine
Videojs + Fairplay

В данной статье мы расскажем, как правильно использовать “open source” плеер Videojs для воспроизведения зашифрованного видео при помощи DRM.

Сайт плеера: https://videojs.com

Эта библиотека используется вместе с библиотекой https://github.com/videojs/videojs-contrib-eme.

Поддерживаемые форматы: HLS, MPEG-DASH.

Videojs + Widevine

Ниже мы приведем пример html-страницы для инициализации плеера.

<!DOCTYPE html>

<html>

<head>

  <link href="https://vjs.zencdn.net/7.18.1/video-js.css" rel="stylesheet" />

  <!-- If you'd like to support IE8 (for Video.js versions prior to v7) -->

  <!-- <script src="https://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script> -->

</head>



<body>

  <video

    id="my-video"

    class="video-js"

    controls

    preload="auto"

    width="640"

    height="264"

    data-setup="{}"

    crossOrigin="anonymous">

    <p class="vjs-no-js">

      To view this video please enable JavaScript, and consider upgrading to a

      web browser that

      <a href="https://videojs.com/html5-video-support/" target="_blank"

        >supports HTML5 video</a

      >

    </p>

  </video>



  <script src="https://vjs.zencdn.net/7.18.1/video.min.js"></script>

  <script src="https://cdn.jsdelivr.net/npm/videojs-contrib-eme@4.0.1/dist/videojs-contrib-eme.min.js"></script>

  <script>

    var player = videojs('my-video');



    player.eme();

    player.src({

      src: 'https://myhost.tld/some/folder/index.mpd',

      type: 'application/dash+xml',

      keySystems: {

        'com.widevine.alpha': 'https://[project].nowdrm.co/widevine'

      }

    });

  </script>

</body>

</html>

В блоке <script> вы указываете ссылку на dash-плейлист, например, https://myhost.tld/some/folder/index.mpd). HTTPS-доступ к файлу обязателен. В поле keySystems укажите адрес сервера проверки лицензий Widevine вида https://[project].nowdrm.co/v2/widevine, где [project] — название вашего проекта в личном кабинете cdnnow!

Videojs + Fairplay

Начало аналогично Videojs + Widevine, меняется только содержимое последнего тега <script>.

...



  <script>

    var player = videojs('my-video');



    player.eme();

    player.src({

      src: 'https://myhost.tld/some/folder/master.m3u8',

      keySystems: {

          'com.apple.fps.1_0': {

              certificateUri: 'https://myhost.tld/certificate.der',

              licenseUri: 'https://[PROJECT].nowdrm.co/fairplay?contentId=[CONTENT_ID]&responseType=rawckc'

          }

      }

    });

  </script>



...

Тут вы указываете ссылку на hls-плейлист, например, https://myhost.tld/some/folder/master.m3u8). HTTPS-доступ к файлу обязателен. В поле keySystems укажите адрес сервера проверки лицензий Fairplay вида https://[PROJECT].nowdrm.co/fairplay?contentId=[CONTENT_ID]&responseType=rawckc, где [project] — название вашего проекта в личном кабинете cdnnow!
Обратите внимание, что в поле licenseUri присутствует [CONTENT_ID] — это идентификатор контента из плейлиста. Функцию для его получения потребуется реализовать отдельно.

В поле certificateUri вставьте URL к *.der-сертификату вида https://myhost.tld/certificate.der, необходимому для запроса к серверу лицензий. HTTPS-доступ к файлу обязателен.
Для тестирования Вы можете воспользоваться нашим сертификатом, для этого напишите вашему менеджеру drmnow!. Позже вам потребуется получить собственные ключи и сертификат для Fairplay у Apple.

Содержание Menu

Интеграция DRM-систем с плеером Videojs

Videojs + Widevine

Videojs + Fairplay

Содержание