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-js.css
opy-sdk-js-all-debug.js or opy-sdk-browser-all.js in the production version of the SDK.

Include the following in the page <head> .

XML

<link rel="stylesheet" href="../../dist/opy-sdk-js.css"/>
<script src="../../dist/opy-sdk-js-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 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".

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
    }
);

Live presentation delay

MPD@suggestedPresentationDelay is a value that is recommended to be supplied in the stream manifest to tell the player how far back it should play from the live edge.

For more information on the DASH specification timing in dynamic presentations, see the DASH-IF implementation guidelines.

A side effect of not configuring this, or it being set to a low value, is that the viewer may observe some stuttering whilst the player buffers and prepares itself for playback close to the live edge.

In the absence of a suitable suggestedPresentationDelay in the stream MPD:

If defaultPresentationDelay is not configured, the default presentation delay is 1.5 times the MPD@minBufferTime; alternatively, set as 0.

If defaultPresentationDelay is configured, use it as the default presentation delay value.

JS

// Before setting url to player, call the following API to configure defaultPresentationDelay value, e.g. 10 seconds
player.otvtoolkit().configure('manifest.defaultPresentationDelay', 10)