Flowplayer

flowplayer - open source HTML5 video player. flowplayer-hlsjs support HLS streams without Flash for this player. Plugin flowplayer-hlsjs uses hls.js library, so when initializing the peering you need to specify the loader type as hlsjs.

Supported versions of Flowplayer

Teleport.js is compatible with Flowplayer versions later than 7.0.0.

Before start

Before teleport.js in initialized the first time, you need to validate the domain and get the API key in Teleport client area.

Initialization

To load chunks from P2P you need:

Create an instance of Flowplayers.
Initialize Teleport with loader params as an argument.

Example

<!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 = "<manifest URL>";
            var API_KEY = "<YOUR APIKEY>";

            function initApp() {
                // Create player
                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
                            }
                        ]
                    }
                });

                // Init Teleport
                teleport.initialize({
                            apiKey: API_KEY,
                            loader: {                           // Loader configuration
                                type: "hlsjs",                  // Plugin ID
                                params: {
                                    hlsjs: player.engine.hlsjs  // hls.js instance
                                }
                            }
                        })
                        .then(function (instance) {
                            // save teleport instance
                            tlprt = instance;
                            console.log("The video has now been loaded!");
                            // Subscribe to on close window event for free used resources
                            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>

Supported versions of Flowplayer

Before start

Initialization

Example

API docs could be found here