Skip to main content
Skip table of contents

Browsers and Connected TV SDK 5 Example Code Quick Start

This guide lets you demonstrate CONNECT Player features and view the example code. See the Reduced Size SDK Example Code Quick Start guide for the Reduced Size SDK.

For full details on integrating the SDK, see the Browser and Connected TV SDK 5 Integration Guide. See also the API documentation.

Download the SDK pack, which provides all the files needed to launch the player and start streaming content; see Downloading the SDK.

  • opy-sdk-js-5.19.x-example-code.zip
    This contains application projects which demonstrate how to use the player features.

  • opy-sdk-js-5.19.x-integration.zip
    This is the SDK binary file used for integration purposes.

  • opy-sdk-js-5.19.x-insight.zip
    This is an additional SDK binary file for the insight data collection feature.

  • opy-sdk-js-5.19.x-quickmark.zip
    This is an additional SDK binary file for the QuickMark forensic watermarking feature.

Procedure

  1. Prepare the hosted folder by creating a new folder on your website or localhost environment. Unzip the opy-sdk-js-5.19.x-integration.zip file and place the following files into your folder:

    • opy-sdk-js-all-integration.js

    • opy-sdk-js.css

  2. Unzip the opy-sdk-js-5.19.x-example-code.zip file and copy the basic-playback folder into your folder.

  3. To test the player, navigate to the web page; the Big Buck Bunny stream should start playing.

  4. You can add different features by repeating this procedure for each example code folder.

Click here to see the example projects.

Playback

chapter-markers

Playback of clear streams with chapter markers.

picture-in-page

Playback of clear streams with picture-in-page.

resolution-capping

Playback of clear streams with the ability to cap bitrate and/or resolution.

thumbnails

Playback of clear streams with thumbnail previews.

track-selection

Playback of clear streams with multi-audio and subtitles.

audioChannelConfig-selection

Playback of clear streams with multi-audio and different channel configurations.

dash-low-latency-playback

Playback of clear DASH streams with low latency.

hls-low-latency-playback

Playback of clear HLS streams with low latency.

service-description

Playback of clear DASH streams with support for the DASH Service Description tag.

Encrypted playback

dash-encrypted-playback

DRM playback of encrypted DASH streams.

dash-encrypted-basic-callback

Playback of encrypted DASH streams using callbacks.

dash-ssm

Playback of encrypted DASH streams with SSM.

dash-customer-ssm

Playback of encrypted DASH streams with session management, licence acquisition and renewal handled by the client application.

hls-encrypted-playback

DRM playback of encrypted HLS streams.

hls-encrypted-basic-callback

Playback of encrypted HLS streams using callbacks.

hls-customer-fairplay-certificate-callback

Playback of encrypted HLS streams using callbacks to obtain the FPS certificate.

hls-encrypted-ssm-playback

Playback of encrypted HLS streams with SSM.

hls-customer-ssm

Playback of encrypted HLS streams with session management, licence acquisition and renewal handled by the client application.

hls-encrypted-legacyEME

Apple’s definition for EME in Safari for playing Fairplay encrypted HLS streams.

tvKey

Encrypted playback with support for TVkey Cloud.

Content security

nexguard-quickmark

Demonstrates use of QuickMark forensic watermarking in pull mode.

nexguard-quickmark-push

Demonstrates use of QuickMark forensic watermarking in push mode.

Statistics and analytics

event-timeline

Playback of clear streams with feedback and analysis of performance tracking or playback issues.

insight-analytics

Playback of clear streams with the ability to perform Insight data collection.

logging and error-reporting

Playback of clear streams with the ability to perform diagnostics.

JavaScript errors detected

Please note, these errors can depend on your browser setup.

If this problem persists, please contact our support.