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

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

Сайт: https://www.openplayerjs.com/, https://github.com/openplayerjs/openplayerjs

Поддерживаемые форматы: HLS с Widevine.

OpenPlayer.js + Widevine

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

<!DOCTYPE html>

<html>

<head>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/openplayerjs/2.10.1/openplayer.min.css" integrity="sha512-7YOfuPJXa1iBvXKmRziNNOeTRPbfUwYljecLrOqvSpvGJDilZQJyWYKTbXWu2X2jX7EsryzRi7XffcUxuajWDQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/openplayerjs/2.10.1/openplayer.min.js" integrity="sha512-21Xs3+rFy4uKwF7OApCQP675wo+9pqfYInuRVj2OfLcvQ570kWSiMh6gQLLoiSI888D8GSUyRzlq4FF0O1bYTw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

</head>

<body>

<video class="op-player__media" id="video" controls playsinline>

<source src="https://myhost.tld/some/folder/master.m3u8">

</video>

<script>

const player = new OpenPlayerJS('video', {

  hls: {

    startLevel: -1,

    enableWorker: true,

    widevineLicenseUrl: 'https://[PROJECT].nowdrm.co/v2/widevine',

    emeEnabled: true,

  }

});

player.init();

player.getElement().addEventListener('hlsLevelLoaded', (e, data) => {

  console.log(e, data);

})

</script>

</body>

</html>

В атрибуте src тега source вы указываете ссылку на hls-плейлист, например, https://myhost.tld/some/folder/master.m3u8). HTTPS-доступ к файлу обязателен. В поле widevineLicenseUrl укажите адрес сервера проверки лицензий Widevine вида https://[project].nowdrm.co/v2/widevine, где [project] название вашего проекта в личном кабинете cdnnow!

Содержание Menu

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

OpenPlayer.js + Widevine

Содержание