Code details

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

CONNECT Player SDK

The player is distributed in the following files:

opy-sdk-js.css
In the standard SDK, the opy-sdk-js-all-integration.js integration version and opy-sdk-js-all.js production version.
In the Reduced Size SDK, opy-sdk-js-all-no-ui-integration.js integration version and opy-sdk-js-all-no-ui.js production version.

Include the following in the page <head>.

XML

<link rel="stylesheet" href="opy-sdk-js.css"/>
<script src="opy-sdk-js-all-integration.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 uses 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 provides 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 browsers, use: type: "application/x-mpegURL".

Text and Audio Track support

To ensure the correct function of multiple text and audio track support, two important attributes need specific settings within the configuration. Their value depends on which browser is being used.

JS

function isSmartTV() {
	return window.navigator.userAgent.toLowerCase().includes("smart");
}

function isSafari() {
	return (
		!isSmartTV() &&
		window.navigator.userAgent.indexOf("Safari") !== -1 &&
		window.navigator.userAgent.indexOf("Chrome") === -1
	);
}

let playerInstance = otvplayer(
    "videoPlayer",
    // options
    {
		html5: {
			// Safari (HLS) MUST have these two set to true
			// other browsers MUST have these two set to false
			nativeCaptions: isSafari(),
			nativeAudioTracks: isSafari(),
		},
        plugins: {
            otvtoolkit: {}
        },
    }
);

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.

This flag should not be used with the Reduced Size SDK.

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.

See the DASH-IF implementation guidelines for more information on the DASH specification timing in dynamic presentations.

A side effect of not configuring this, or setting it 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)

Preferred player and HbbTV mode

The underlying playback engine of NAGRA's CONNECT player is the open-source ShakaPlayer, which provides you with the full range of features described in this document. However, the CONNECT player may require a different underlying player in some situations. For example, in HbbTV mode, the CONNECT player may need to use the manufacturer's native player to play TVKey-protected streams instead of the ShakaPlayer. CONNECT player will automatically detect HbbTV mode and select the native player by default (with reduced capabilities compared with the ShakaPlayer).

You can override CONNECT player's default selection of the underlying player; this may be useful during development, however, it is highly discouraged in production code. To override CONNECT player's default selection, modify the player's instantiation code:

JS

let playerInstance = otvplayer(
    "videoPlayer",
    // options
    {
        plugins: {
            otvtoolkit: {
                // Native player or shaka player can be selected to play streams in HBBTV with option 'preferredPlayer'.
                // The valid parameters are : 'html5' and 'shaka'
                preferredPlayer: "html5",
            }
        },
    }
);