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>
.
<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>
.
<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 byvideo.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.
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 theotvtoolkit
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:
playerInstance.otvtoolkit();
Setting the player source
Still within the callback, specify the video source URL:
source = {
src: streamUrl,
type: "application/dash+xml"
};
playerInstance.src(source);
A player source is an object containing:
src
– the URL of the video sourcetype
– 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.
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.
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.
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 theMPD@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:
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",
}
},
}
);