Shaka Player

Tuesday, March 31, 2020 5:24 AM

Shaka Player - это библиотека с открытым исходным кодом для воспроизведения адаптивных видеопотоков. Она поддерживает такие форматы как HLS и DASH без использования плагинов и Flash. Вместо этого Shaka Player использует открытые Web стандарты MediaSource Extensions и Encrypted Media Extensions.

Поддерживаемые версии

Teleport.js совместим со всеми версиями Shaka Player старше 2.1.0

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

Teleport.js протестирован с MPEG Dash. В скором времени ожидается поддержка HLS.js.

Необходимая внешняя информация

Инициализация Teleport

Загрузка javascript модулей при интеграции Shaka Player с Teleport.js происходит строго в следующем порядке:

  1. Shaka Player.
  2. Бандл Teleport Core с Teleport Shaka Player plugin (все варианты подключения библиотеки Teleport).

Пример:

<script src="https://cdnjs.cloudflare.com/ajax/libs/shaka-player/2.2.6/shaka-player.compiled.js"></script>
<script src="https://cdn.teleport.media/stable/teleport.shaka.bundle.js"></script>

Для загрузки видео плеером сегментов из пиринга нужно:

  1. Создать экземпляр Shaka Player.
  2. Инициализировать Телепорт, передав в качестве параметра лоадера созданный экземпляр плеера.

Полный пример

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>TELEPORT SHAKA EXAMPLE</title>
        <script src="//cdnjs.cloudflare.com/ajax/libs/shaka-player/2.2.5/shaka-player.compiled.debug.js"></script>
    </head>
    <body>
        <video id="video" width="640" controls autoplay></video>

        <!-- Подключение основного SDK с плагином для Shaka Player-->
        <script src="https://cdn.teleport.media/stable/teleport.shaka.bundle.js"></script>
        <!-- Скрипт инициализации -->
        <script>
            var tlprt;
            var STREAM_URL = "<URL видео-манифеста>";
            var API_KEY = "<APIKEY полученных из кабинета>";

            function initApp() {
                shaka.polyfill.installAll();

                var video = document.getElementById("video");
                var player = new shaka.Player(video); // инициализируем плеер
                player.addEventListener("error", onErrorEvent);

                // инициализируем экземпляр Teleport
                teleport.initialize({
                            apiKey: API_KEY,
                            loader: {              // параметры интеграции с плеером
                                type: "shaka",     // идентификатор плагина
                                params: {
                                    player: player // экземпляр плеера
                                }
                            }
                        })
                        .then(function (instance) {
                            // запускаем плеер и сохраняем экземпляр teleport
                            tlprt = instance;

                            return player.load(STREAM_URL);
                        })
                        .then(function () {
                            console.log('The video has now been loaded!');
                            // подписываемся за событие закрытия страницы, чтобы корректно освободить ресурсы
                            window.addEventListener("unload", function () {
                                if (tlprt) {
                                    tlprt.dispose();
                                    tlprt = null;
                                }
                            });
                        })
                        .catch(onError);
            }

            function onErrorEvent(event) {
                onError(event.detail);
            }

            function onError(error) {
                // Log the error.
                console.error("Error code", error.code, "object", error);
            }

            document.addEventListener("DOMContentLoaded", initApp);
        </script>
    </body>
</html>

Документация по Teleport API