Flowplayer

Tuesday, March 31, 2020 5:24 AM

flowplayer - open source HTML5 видеоплеер. С помощью плагина flowplayer-hlsjs реализуется поддержка HLS стримов без использования Flash. Плагин flowplayer-hlsjs использует библиотеку hls.js, поэтому при инициализации пиринга нужно указывать тип лоадера hlsjs.

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

Для просмотра Teleport.js совместим с версиями Flowplayer старше 7.0.0.

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

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

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

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

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

Пример:

<script src="https://cdn.jsdelivr.net/hls.js/latest/hls.min.js"></script>
<script src="https://cdn.teleport.media/stable/teleport.hlsjs.bundle.js"></script>

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

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

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

<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>TELEPORT FLOWPLAYER EXAMPLE</title>
    </head>
    <body>
        <div id="player"></div>
        <script src="//releases.flowplayer.org/7.0.4/flowplayer.min.js"></script>
        <script src="//releases.flowplayer.org/hlsjs/flowplayer.hlsjs.light.min.js"></script>
        <script src="https://cdn.teleport.media/stable/teleport.hlsjs.bundle.js"></script>
        <script>
            var tlprt;
            var STREAM_URL = "<URL видео-манифеста>";
            var API_KEY = "<APIKEY полученных из кабинета>";

            function initApp() {
                // инициализируем плеер
                var player = flowplayer("#player", {
                    autoplay: true,
                    splash: false,
                    ratio: 9/16,
                    swfHls: "https://releases.flowplayer.org/7.0.4/flowplayerhls.swf",
                    clip: {
                        hlsjs: {
                            safari: true
                        },
                        live: true,
                        sources: [
                            {
                                type: "application/x-mpegurl",
                                src: STREAM_URL
                            }
                        ]
                    }
                });

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

                            console.log("The video has now been loaded!");
                            // подписываемся за событие закрытия страницы, чтобы корректно освободить ресурсы
                            window.addEventListener("unload", function () {
                                if (tlprt) {
                                    tlprt.dispose();
                                    tlprt = null;
                                }
                            });
                        })
                        .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