Browsers SDK Example Code Quick Start

This guide enables you to demonstrate CONNECT Player features and view the example code.

Prerequisites

Download and unzip the Browsers SDK pack, which provides all the files needed to launch the player and start streaming content.

• opy-sdk-browser-<version>-integration.zip
• opy-sdk-browser-<version>-example-code.zip

You also need a valid CONNECT Player licence (opy_licence file).

Procedure

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

   • opy-sdk-browser-all.js
   • opy-sdk-browser.css
     
     

2. Unzip the opy-sdk-browser-<version>-example-code.zip file and copy the basic-playback folder into your folder.

3. Place the opy-licence file containing your player licence key inside the basic-playback folder.

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

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

   • 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  Secure Session Management.
   • dash-encrypted-ssm-callback-playready - Playback of PlayReady protected content using SSM and callbacks.
   • azure-encrypted-playback - DRM playback of Azure protected content.
   • hls-encrypted-playback - DRM playback of encrypted HLS streams.
   • hls-encrypted-basic-callback - Playback of encrypted HLS streams using callbacks.
   • live-delay-playback - Clear playback with adjustment of live latency of DASH streams.
   • low-latency-playback - Clear playback with low latency of DASH streams.
   • dynamic-ads-ima - Clear playback with dynamic  Adverts with Google IMA.
   • companion-ads-ima - Clear playback with companion  Adverts with Google IMA.
   • chapter-markers - Clear playback with  Chapter markers.
   • custom-control-bar - Clear playback with styling of an alternative control bar.
   • event-timeline - Clear playback with feedback and analysis of performance tracking or playback issues.
   • picture-in-picture - Clear playback with Picture-in-page.
   • preview-thumbnails - Clear playback with  Thumbnail previews
   • resolution-capping - Clear playback with  Resolution capping.
   • track-selection - Clear playback with  Multi-audio and  Subtitles.

For full details on integrating the SDK, see the  Browsers SDK Integration Guide.