Code details

Important aspects of the code are explained in the following sections.

CONNECT Player SDK

The player is distributed as two files:

opy-sdk-browser.css
opy-sdk-browser-all-debug.js or opy-sdk-browser-all.js in the production version of the SDK

Include the following in the page <head> :

CODE

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

Change the path as required to point to your distribution folder.

HTML5 video tag

Add a <video> tag to the page <body> .

XML

<video
class="video-js vjs-default-skin vjs-16-9"
id="videoPlayer"
controls
crossorigin="anonymous"
></video>

The id attribute is mandatory and must be unique on the page. The player code uses it to identify the <video> tag to attach the player to.

The class attribute contains two classes:

video-js applies styles that are required by video.js (the industry-standard technology on which the player is built).
vjs-default-skin applies the default skin to the HTML controls. It can be removed or overridden to apply your design to the controls.

Player instance

Add code to create an instance of CONNECT Player and attach it to the <video> tag after the document is loaded. The extract above does this by using a listener to listen for the DOMContentLoaded event:

JS

let playerInstance = otvplayer(
"videoPlayer",
// options
{},
// loaded callback
function loadedCallback() {
...
}
);

This takes three parameters:

The id of the <video> tag to attach the player to (which you added to the <video> tag above
An options object. This can be used to set up the otvtoolkit plugin (see below). In this example, no setup is required so the options object is empty.
A callback that will be executed when the player is initialised and ready to play.

Initialising the otvtoolkit plugin

The otvtoolkit plugin is an essential part of the CONNECT Player SDK and is used to provide advanced player features. When the player is ready, initialise the otvtoolkit plugin:

JS

playerInstance.otvtoolkit();

Setting the player source

Still within the callback, specify the video source URL:

JS

source = {
src: streamUrl,
type: "application/dash+xml"
};
playerInstance.src(source);

A player source is an object containing:

src – the URL of the video source
type – the content's MIME type

Once you pass this object to the player's src() function, the video will start to play.

For HLS streams in Apple Safari browser use: type: "application/x-mpegURL".

Player licence

You need a licence to use the CONNECT Player. This licence:

Enables some or all of the player features, for some or all supported platforms.
May or may not have an expiry date.
Displays a semi-transparent overlay or watermark if it is a trial licence.

You cannot initialise the player without a valid licence, which is supplied as part of the CONNECT Player SDK. To apply the licence to the player initialisation, do one of the following:

Place the opy_licence file in the same folder as the page on which the player is integrated (alongside the .html file).
Specify the licence as the value for the licence key in the initialisation block for the otvtoolkit plugin:

JS

playerInstance = otvplayer(
"videoPlayer",
// options
{
html5: {
nativeCaptions: nativeCaptionsSetting,
nativeAudioTracks: nativeAudioTracksSetting
},
plugins: {
otvtoolkit: {
licence: "eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCIs...",
drm: drmSystem
}
}
},
// loaded callback
function loadedCallback() {
...
});

Live stream support

To display the progress bar for seeking within the seekable range during live stream playback, the liveui attribute to needs to be set to true .

JS

let playerInstance = otvplayer(
"videoPlayer",
// options
{
plugins: {
otvtoolkit: {}
},
liveui: true
}
);