Video.js HLS

Tuesday, March 31, 2020 5:24 AM

Video.js - это библиотека с открытым исходным кодом для воспроизведения адаптивных видеопотоков.

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

Teleport.js совместим с версиями VideoJS старше 5.19.1.

Для начала работы

До первой инициализации teleport.js необходимо привязать домен и получить API ключ apiKey в личном кабинете клиента Teleport.

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

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

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

Пример:

<script src="https://cdnjs.cloudflare.com/ajax/libs/video.js/6.4.0/video.min.js"></script>
<script src="https://cdn.teleport.media/stable/teleport.videojs-hls.bundle.js"></script>

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

  1. Инициализировать Телепорт, передав в качестве параметра лоадера конструктор плеера.
  2. Создать экземпляр Video.js плеера.

###A Примечание

Если нужно инициализировать плеер с дополнительными параметрами, их нужно указывать вторым параметром в функции создания плеера (там же где и лоадер Телепорта), а не в атрибуте data-setup тега video. Иначе плеер может быть создан раньше времени.

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

<!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 VIDEOJS HLS EXAMPLE</title>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/video.js/6.4.0/video-js.min.css">
    </head>
    <body>
        <video id="video" width="600" height="300" class="video-js vjs-default-skin" controls>
            <source src="<URL видео-манифеста>" type="application/x-mpegURL" />
        </video>

        <!-- Подключение VideoJS -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/video.js/6.4.0/video.min.js"></script>
        <!-- Подключение основного SDK с плагином для VideoJS -->
        <script src="https://cdn.teleport.media/stable/teleport.videojs-hls.bundle.js"></script>
        <!-- Скрипт инициализации -->
        <script>
            var API_KEY = "<APIKEY полученных из кабинета>";

            function initApp() {
                // инициализируем экземпляр Teleport
                teleport.initialize({
                            apiKey: API_KEY,
                            loader: {                        // параметры интеграции с плеером
                                type: "videojs-hls",         // идентификатор плагина
                                params: {
                                    videojs: window.videojs  // конструктор плеера
                                }
                            }
                        })
                        .then(function () {
                            // запускаем плеер
                            var player = window.videojs('video');

                            player.play();
                        })
                        .catch(onError);
            }

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

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

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