OpenTV Player SDK for Browsers Integration

Introduction

This following describes how to instantiate and use the OpenTV Player SDK for Browsers and provides guidance on using the features of the player. The SDK includes complete code examples to demonstrate the basic and advanced features.

Player hosting and configuration

Download the OpenTV Player SDK for Browsers pack, and host the following files on a web server:

  • opy-sdk-browser.css
  • opy-sdk-browser-all.js

localhost is satisfactory for development and testing purposes.

  • The hosted video must be configured to allow cross-origin resource sharing (CORS) if not hosted on the same origin such as a different domain or subdomain.

  • The OpenTV Player SDK for Browsers uses cryptographic functions provided by the browser. Some browsers might inhibit this functionality if not running over HTTPS. You are recommended to only deploy OpenTV Player SDK for Browsers over HTTPS.

  • A licence will be required to use the player, see Player Licensing for details.

Creating a simple player

The player can be integrated by hosting a few lines of HTML on an HTTP server. For details of this code, see Example code.

<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" href="dist/opy-sdk-browser.css">
    <script src="dist/opy-sdk-browser-all-debug.js"></script>
</head>

<body>
    <video class="video-js vjs-default-skin vjs-16-9" id="videoPlayer" controls crossorigin="anonymous">
    </video>
    <script>
        document.addEventListener("DOMContentLoaded", function initializeRefApp() {
            let playerInstance = otvplayer(
                "videoPlayer",
                // options
                {},
                // loaded callback
                function loadedCallback() {
                    // Initialise the toolkit plugin (if not initialised by the player options)
                    playerInstance.otvtoolkit();
                    source = {
                        src: streamUrl,
                        type: "application/dash+xml"
                    };
                    playerInstance.src(source);
                });
        });
    </script>
</body>

</html>