wjplayer

Tuesday, March 31, 2020 5:24 AM

wjplayer is an setting of video.js player with HLS, VAST / VMAP / VPAID advertising standards support, panoramic video in 360 degrees and other features.

Supported versions of wjplayer

Teleport.js is compatible with wjplayer version 1.6.0 or later

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

Loading javascript modules when integrating wjplayer with teleport.js should occur strictly in the following order:

  1. wjplayer.
  2. Teleport Core bundle with Teleport VideoJS HLS plugin.

Example:

<script src="https://unpkg.com/wjplayer/dist/wjplayer.min.js"></script>
<script src="https://cdn.teleport.media/stable/teleport.videojs-hls.bundle.js"></script>

To load chunks from P2P you need:

  1. Initialize Teleport with loader params and API key as an argument.
  2. Create an instance of wjplayer.

Example

<!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 WJPLAYER EXAMPLE</title>
        <link href="https://unpkg.com/wjplayer/dist/wjplayer.css" rel="stylesheet">
    </head>
    <body>
        <div id="video"></div>
        <!-- Include wjplayer -->
        <script src="https://unpkg.com/wjplayer/dist/wjplayer.min.js"></script>
        <!-- Include Teleport Core bundle with Teleport VideoJS plugin -->
        <script src="https://cdn.teleport.media/stable/teleport.videojs-hls.bundle.js"></script>
        <!-- Setup-->
        <script>
            var STREAM_URL = "<manifest URL>";
            var API_KEY = "<YOUR APIKEY>";
            
            function initApp() {
                // Init Teleport
                teleport.initialize({
                            apiKey: API_KEY,
                            loader: {                        // Loader configuration
                                type: "videojs-hls",         // Plugin ID
                                params: {
                                    videojs: window.videojs  // Player constructor
                                }
                            }
                        })
                        .then(function () {
                            // Create player
                            var player = wjplayer({
                                containerId: 'video',
                                skin: 'nmd',
                                sources: [
                                    {
                                        src: STREAM_URL,
                                        type: 'application/x-mpegURL'
                                    }
                                ]
                            });
                        })
                        .catch(onError);
            }
        
            function onError(error) {
                // Log the error
                console.error("Error code", error.code, "object", error);
            }
        
            document.addEventListener("DOMContentLoaded", initApp);
        </script>
    </body>
</html>

API docs could be found here