OpenTV Player SDK for Browsers Integration
This guide 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
-
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; Nagra recommends only deploying OpenTV Player SDK for Browsers over HTTPS.
Creating a simple player
The player can be integrated by hosting a few lines of HTML on an HTTP server. This file (and the linked JS and CSS files) must be hosted on a web server for this to work.
Hosting on localhost is satisfactory for development and testing purposes.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="dist/opy-sdk-js.css" />
<script src="dist/opy-sdk-js-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>
Callback Mode
An alternative integration style where callbacks can be delegated to complete DRM licence acquisition actions is described separately.