Video Cloud Native SDKs

https://sdks.support.brightcove.com/
Admin
Brightcove Native SDKs provide tools for native app integration with Android, iOS, iPadOS, and tvOS,...
Tokens:1,281,167
Snippets:9,472
Trust Score:10
Update:1 year ago
Show doc for...
Tokens:
Raw
### Install Brightcove Web SDK using npm

Source: https://sdks.support.brightcove.com/web-sdk/getting-started/getting-started

Installs the Brightcove Web SDK package from npm. This is the primary method for integrating the SDK into your project.

```bash
npm install @brightcove/web-sdk
```

--------------------------------

### Getting Started with Brightcove Web & Smart TV SDK (npm)

Source: https://sdks.support.brightcove.com/search_q=Interactivity

This snippet shows how to install and start using the Brightcove Web & Smart TV SDK via npm. Note: This SDK is in early development.

```Bash
# Install the Brightcove Web & Smart TV SDK using npm
npm install @brightcove/web-smart-tv-sdk --save

# Once installed, you can import and use it in your JavaScript project:
# import brightcoveSDK from '@brightcove/web-smart-tv-sdk';
# 
# // Example usage would follow, depending on the SDK's API.
```

--------------------------------

### Getting Started with Brightcove Web & Smart TV SDK

Source: https://sdks.support.brightcove.com/search_q=index

This guide provides the initial steps for setting up and using the Brightcove Web & Smart TV SDK. Note that this SDK is in its early stages and may evolve significantly.

```javascript
// Example of installing the SDK using npm:
// npm install @brightcove/web-sdk

// Example of initializing the player on a web page:
// const player = brightcove.api.createExperiences('YOUR_PLAYER_ID');
// player.load();

```

--------------------------------

### Verify webOS CLI Installation

Source: https://sdks.support.brightcove.com/web-sdk/references/lg

Verifies the installation of the webOS CLI by checking its version. This confirms that the CLI is correctly installed and ready for use.

```shell
ares -V
```

--------------------------------

### Initialize Brightcove Player

Source: https://sdks.support.brightcove.com/web-sdk/getting-started/getting-started

Demonstrates the initial setup of a Brightcove player instance, requiring an account ID. The player is then attached to a specified DOM element.

```javascript
const player = new Player({
  // Account ID parameter is required to initialize a player
  accountId: '<ACCOUNT_ID>',
 });

const root = document.querySelector('#player-mount-root');
 player.attach(root);
```

--------------------------------

### Complete Code Example (Java)

Source: https://sdks.support.brightcove.com/android/basics/android-v9-migration-guide

A comprehensive Java code example demonstrating the complete integration of the `PlaybackNotification` for background playback.

```APIDOC
## Complete Code Example (Java)

### Description
This is a complete code snippet in Java that demonstrates the entire process of setting up background playback notifications. It includes initializing the `PlaybackNotification`, configuring it, and assigning it to the `ExoPlayerVideoDisplayComponent`.

### Method
Java Code Snippet

### Endpoint
Activity where Brightcove Player is used

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```java
// Get the ExoPlayerVideoDisplayComponent
ExoPlayerVideoDisplayComponent displayComponent = ((ExoPlayerVideoDisplayComponent) brightcoveVideoView.getVideoDisplay());

// Get the instance of BackgroundPlaybackNotification and initialize it
PlaybackNotification notification = BackgroundPlaybackNotification.getInstance(this);

// Configure the notification
notification.setConfig(new PlaybackNotificationConfig(this));

// Set the player for the notification
notification.setPlayback(displayComponent.getPlayback());

// Assign the notification to the video display component
if (displayComponent != null ) {
    // Assuming createPlaybackNotification() is a method that returns the initialized PlaybackNotification
    displayComponent.setPlaybackNotification(createPlaybackNotification()); 
}
```

### Response
#### Success Response (200)
Complete integration of background playback notification.

#### Response Example
None
```

--------------------------------

### OpenMeasurementTracker Creation and Start

Source: https://sdks.support.brightcove.com/android/reference/javadoc/com/brightcove/ssai/omid/OpenMeasurementTracker

Guide on creating an OpenMeasurementTracker instance and starting the tracking session.

```APIDOC
## Create and Start Tracker

### Description
Creates an `OpenMeasurementTracker` instance using the `Factory` with partner information and the `BaseVideoView`. The tracker is then started to initiate the ad session.

### Method
`omTracker = new OpenMeasurementTracker.Factory(PARTNER_ID, PARTNER_VERSION, videoView).create();
omTracker.start();`

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```java
 public class MyActivity extends Activity {

   private OpenMeasurementTracker omTracker;

   @Override public void onCreate(Bundle savedInstanceState) {
     super.onCreate(savedInstanceState);
     // ... other setup

     // Assuming videoView is your BaseVideoView instance
     String PARTNER_ID = "YOUR_PARTNER_ID";
     String PARTNER_VERSION = "YOUR_PARTNER_VERSION";
     BaseVideoView videoView = /* get your video view */;

     omTracker = new OpenMeasurementTracker.Factory(
         PARTNER_ID, PARTNER_VERSION, videoView
     ).create();
     omTracker.start();

     // ... more setup
   }
 }
 ```

### Response
#### Success Response (200)
No explicit response body for starting the tracker.

#### Response Example
N/A

### Error Handling
`start()` can throw `OpenMeasurementTracker.Error` on failure.
```

--------------------------------

### Install webOS CLI

Source: https://sdks.support.brightcove.com/web-sdk/references/lg

Installs the webOS Command Line Interface globally using npm. This tool is essential for developing applications for webOS devices.

```shell
npm install -g @webos-tools/cli
```

--------------------------------

### Complete Code Example (Kotlin)

Source: https://sdks.support.brightcove.com/android/basics/android-v9-migration-guide

A comprehensive Kotlin code example demonstrating the complete integration of the `PlaybackNotification` for background playback.

```APIDOC
## Complete Code Example (Kotlin)

### Description
This is a complete code snippet in Kotlin that illustrates the entire process of setting up background playback notifications. It includes initializing the `PlaybackNotification`, configuring it, and assigning it to the `ExoPlayerVideoDisplayComponent`.

### Method
Kotlin Code Snippet

### Endpoint
Activity where Brightcove Player is used

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```kotlin
// Get the ExoPlayerVideoDisplayComponent
val videoDisplayComponent = baseVideoView.videoDisplay as ExoPlayerVideoDisplayComponent?

// Get the instance of BackgroundPlaybackNotification and initialize it
val myNotification = BackgroundPlaybackNotification.getInstance(this)

// Configure the notification
myNotification?.setConfig(PlaybackNotificationConfig(this))

// Set the player for the notification
myNotification?.playback = videoDisplayComponent?.playback

// Assign the notification to the video display component
videoDisplayComponent?.let {
    videoDisplayComponent.playbackNotification = myNotification
}
```

### Response
#### Success Response (200)
Complete integration of background playback notification.

#### Response Example
None
```

--------------------------------

### Verify Node.js and npm Installation

Source: https://sdks.support.brightcove.com/web-sdk/references/lg

Checks if Node.js and npm are installed and accessible in the system's PATH. This is a prerequisite for using many web development tools.

```shell
node -v
npm -v
```

--------------------------------

### Import Brightcove SDK Player (CommonJS/ES Module)

Source: https://sdks.support.brightcove.com/web-sdk/getting-started/getting-started

Demonstrates how to import the Player class from the Brightcove Web SDK using either CommonJS or ES Module syntax after installation.

```javascript
const { Player } = require('@brightcove/web-sdk');
```

```javascript
import { Player } from '@brightcove/web-sdk';
```

--------------------------------

### Build the Video App

Source: https://sdks.support.brightcove.com/web-sdk/references/lg

Builds the application using the nx command, a task runner commonly used in monorepo setups. This command is executed in the root directory of the SDK.

```shell
$ npx nx run-many -t build
```

--------------------------------

### Styling API

Source: https://sdks.support.brightcove.com/web-sdk/getting-started/getting-started

Methods for applying CSS for UI features.

```APIDOC
## Styling

To apply CSS for UI features follow these steps:

### Import the Player Class

```javascript
import Player from '@brightcove/web-sdk/ui';
```

### Import the CSS for the Player Class

```javascript
import '@brightcove/web-sdk/ui/styles';
```

### Importing Integration-Specific Styles

you must import the styles specific to that integration from   
`@brightcove/web-sdk/integrations/<integration-name>/styles`   
If you are integrating with a specific feature like `pinning`, follow this pattern:

```javascript
import '@brightcove/web-sdk/integrations/pinning/styles';
```
```

--------------------------------

### Initialize NetworkingManager

Source: https://sdks.support.brightcove.com/web-sdk/getting-started/getting-started

Get an instance of the NetworkingManager from the player to access its request and response handling capabilities.

```javascript
const networkingManager = player.getNetworkingManager();
```

--------------------------------

### PlaylistManager API

Source: https://sdks.support.brightcove.com/web-sdk/getting-started/getting-started

Methods for creating playlists, managing the current playing item, and navigating through playlist items.

```APIDOC
## PlaylistManager

The `PlaylistManager` provides methods for creating playlists, managing the current playing item, and navigating through the playlist items.

### Initialize PlaylistManager

```javascript
const playlistManager = player.getPlaylistManager();
```

### Create a Playlist from a Playback API Response

```javascript
const videoCloudPlaylist = playlistManager.createPlaylistFromBrightcoveVideoModels(
  /* Array<BrightcoveVideoModel> */
);
```

### Create a Playlist from Remote Sources

Alternatively, create a playlist using remote media sources.

```javascript
const remotePlaylist = playlistManager.createPlaylistFromRemoteSources(
   /* Array<Source> */
 );
```

### Set the Playlist in the PlaylistManager

```javascript
playlistManager.setPlaylist(/* videoCloudPlaylist | remotePlaylist */);
```

### Load the First Playlist Item

```javascript
player.loadBrightcoveVideoModel(playlist.getCurrentItem());
```

### Navigate Through the Playlist

Use the next methods to navigate through the playlist items.

* Move to the next item:

```javascript
playlist.moveToNext();
```

* Move to the previous item:

```javascript
playlist.moveToPrevious();
```

* Move to a specific item:

```javascript
playlist.moveTo(/* index number */);
```

* Shuffle the playlist:

```javascript
playlist.shuffle();
```

### Load the new current item

Load the newly selected item in the playlist.

```javascript
player.loadBrightcoveVideoModel(playlist.getCurrentItem());
```
```

--------------------------------

### Create and Start OpenMeasurementTracker

Source: https://sdks.support.brightcove.com/android/reference/javadoc/com/brightcove/ssai/omid/OpenMeasurementTracker

Creates an instance of `OpenMeasurementTracker` with partner information and starts the tracking session. This is typically done when a video view is ready to play ads.

```java
public class MyActivity extends Activity {

  private OpenMeasurementTracker omTracker;

  @Override public void onCreate(Bundle savedInstanceState) {
    // ...

    omTracker = new OpenMeasurementTracker.Factory(
        PARTNER_ID, PARTNER_VERSION, videoView
    ).create();
    omTracker.start();

    // ...
  }
}
```

--------------------------------

### Getting Started with Brightcove Web & Smart TV SDK

Source: https://sdks.support.brightcove.com/search_q=seek-percentage

Initial steps to set up and use the Brightcove Web & Smart TV SDK. Note: This SDK is an early version and may evolve.

```bash
# Example installation using npm
npm install brightcove-web-sdk
```

--------------------------------

### Initialize Player and Update Configuration with Policy Key

Source: https://sdks.support.brightcove.com/web-sdk/getting-started/getting-started

Initializes a new Brightcove Player instance and updates its configuration with a policy key for accessing content. Requires the Brightcove SDK.

```JavaScript
const player = new Player({accountId: '<ACCOUNT_ID>'});

player.updateConfiguration({
  brightcove: {
    policyKey: '<POLICY_KEY>'
  },
});
```

--------------------------------

### Initialize PlaylistManager

Source: https://sdks.support.brightcove.com/web-sdk/getting-started/getting-started

Initializes the PlaylistManager by getting an instance from the player object. This is the first step to managing playlists.

```javascript
const playlistManager = player.getPlaylistManager();
```

--------------------------------

### Social Sharing Integration Setup

Source: https://sdks.support.brightcove.com/web-sdk/code-samples/social-sharing

Instructions and code examples for setting up social sharing integration within the Brightcove SDK.

```APIDOC
## Integrating Social Sharing with Brightcove Web & Smart TV SDK

### Description
This document provides comprehensive instructions on how to integrate Social Sharing with the Brightcove Web & Smart TV SDK. The Social Sharing Integration enables the inclusion of social sharing buttons within your media player, facilitating easy sharing of content on social networks like Facebook, Twitter, Pinterest, and LinkedIn. This feature enhances viewer engagement and promotes content virality.

### Prerequisites
* A Brightcove account with access to Video Cloud.
* The Brightcove Web & Smart TV SDK installed in your project.

## Usage Example

### 1. Import Player and IntegrationsManager
```javascript
import { Player, IntegrationsManager } from '@brightcove/web-sdk/ui';
```

### 2. Import Social Sharing Integration Factory
```javascript
import { SocialSharingIntegrationFactory } from '@brightcove/web-sdk/integrations/socialSharing';
```

### 3. Import Social Sharing Integration CSS
```javascript
import '@brightcove/web-sdk/integrations/socialSharing/styles';
```

### 4. Create and Configure the Player
```javascript
const player = new Player({ accountId: '<account-id>' });

player.updateConfiguration({
  integrations: {
    socialSharing: {
      title: 'Social Sharing Overlay Title',
      description: 'Overlay description...', 
      services: {
        facebook: true,
        twitter: true,
        tumblr: false,
        pinterest: false,
        linkedin: false,
      },
      // etc
    },
  },
});
```

### 5. Attach the Player to a Mount Root
```javascript
const root = document.querySelector('#player-mount-root');
player.attach(root);
```

## Configuration Summary

| Configuration Option | Type   | Default        | Description                                                                                                  |
|----------------------|--------|----------------|--------------------------------------------------------------------------------------------------------------|
| `title`              | string | ""           | Used to provide a title for use in the social overlay. Can be updated dynamically.                           |
| `description`        | string | ""           | Used to provide a description for use in the social overlay. Can be updated dynamically.                     |
| `url`                | string | ""           | Used to provide a custom URL that replaces the generated one. Can be updated dynamically.                    |
| `label`              | string | ""           | Used to provide a label for the social overlay. Can only be updated on initialization of the plugin.         |
| `embedCode`          | string | ""           | Used to provide a custom embed code that replaces the generated one. Can be updated dynamically.             |
| `embedDomain`        | string | "players.brightcove.net" | This value is only used when the embed code is not set. Used to provide a custom domain if proxy is being used. Can be updated dynamically. |
| `embedDimensions`    | boolean| false          | If true, the current dimensions of the player will be provided in the embed code. Can be updated dynamically. |
| `deeplinking`        | boolean| false          | If true, direct links will include a start offset. Can be updated dynamically.                               |
| `offset`             | string | "00:00:00"   | An offset in "hh:mm:ss" format to use for sharing URLs. Can be updated dynamically.                        |
| `removeDirect`       | boolean| false          | If true, turns off the direct link. Can be updated dynamically.                                              |
| `removeEmbed`        | boolean| false          | If true, turns off the embed code. Can be updated dynamically.                                                |
| `services`           | object |                | An object containing boolean flags for enabling specific social services (facebook, twitter, etc.). |
|                      |        |                | **Example**: `{
  "facebook": true,
  "twitter": true,
  "linkedin": false
}`                                     |
```

--------------------------------

### Register and Initialize Player with Integrations

Source: https://sdks.support.brightcove.com/web-sdk/getting-started/getting-started

Demonstrates registering custom integration factories (like Pinning and Thumbnails) with the IntegrationsManager and then initializing the player with specific integration configurations. Requires the Brightcove SDK and specific integration modules.

```JavaScript
import { Player, IntegrationsManager } from '@brightcove/web-sdk';
 import { PinningIntegrationFactory } from '@brightcove/web-sdk/integrations/pinning';
 import { ThumbnailsIntegrationFactory } from '@brightcove/web-sdk/integrations/thumbnails';
 import '@brightcove/web-sdk/ui/styles';
 import '@brightcove/web-sdk/integrations/pinning/styles';
 import '@brightcove/web-sdk/integrations/thumbnails/styles';

IntegrationsManager.registerPinningIntegrationFactory(PinningIntegrationFactory);
IntegrationsManager.registerThumbnailsIntegrationFactory(ThumbnailsIntegrationFactory);

const player = new Player({accountId: '<ACCOUNT_ID>'});

player.updateConfiguration({
// Integrations can have their own configuration options
  integrations: {
    pinning: {
      posX: 'left',
      posY: 'top',
      closeable: true
    }
  }
});
```

--------------------------------

### Handle First Event Emission (once)

Source: https://sdks.support.brightcove.com/web-sdk/getting-started/getting-started

Attaches an event listener that will trigger only once for a specified event. Useful for one-time setup or actions.

```javascript
player.once(Player.Event.PlayerPlaying, (event) => {
    console.log('PlayerPlaying event: ', event);
});
```

--------------------------------

### Specify Brightcove SDK Version via CDN

Source: https://sdks.support.brightcove.com/web-sdk/getting-started/getting-started

Illustrates how to specify different versions of the Brightcove SDK when including it via CDN, allowing for major, minor, or patch version targeting.

```html
<script src="https://players.brightcove.net/sdk/v1/web-sdk/playback/index.iife.min.js"></script>
 <script src="https://players.brightcove.net/sdk/v1.1/web-sdk/playback/index.iife.min.js"></script>
 <script src="https://players.brightcove.net/sdk/v1.1.1/web-sdk/playback/index.iife.min.js"></script>
```

--------------------------------

### Update Brightcove Player Configuration

Source: https://sdks.support.brightcove.com/web-sdk/getting-started/getting-started

Shows how to dynamically update player configuration parameters, including Brightcove-specific settings like policy key and UI options such as language and playsinline.

```javascript
player.updateConfiguration({
  brightcove: {
    policyKey: '<POLICY_KEY>'
  },
  ui: {
    language: 'en',
    playsinline: false
  }
});
```

--------------------------------

### Import Player Class

Source: https://sdks.support.brightcove.com/web-sdk/getting-started/getting-started

Imports the main Player class from the Brightcove Web SDK. This is necessary to interact with the player functionalities.

```javascript
import Player from '@brightcove/web-sdk/ui';
```

--------------------------------

### Run or Debug Tizen Application

Source: https://sdks.support.brightcove.com/web-sdk/references/samsung

Configures and launches a Tizen application for either execution or debugging within Tizen Studio. Supports deployment to physical devices or the web simulator.

```plaintext
1. Right-click on the project, select **Run As** > **Tizen Web Application** (for physical devices) or **Tizen Web Simulator Application** (Samsung TV) for the simulator.
2. Right-click on the project, select **Debug As** opens the developer tools after launching the application.
```

--------------------------------

### Load Video Cloud VOD into Player

Source: https://sdks.support.brightcove.com/web-sdk/getting-started/getting-started

Explains how to load Video Cloud VOD content into the Brightcove player by fetching video metadata using a video ID and then loading the video model.

```javascript
const player = new Player({accountId: '<ACCOUNT_ID>'});

player.updateConfiguration({
  brightcove: {
    policyKey: '<POLICY_KEY>'
  },
});

async function loadVideo(videoId) {
// you can abort a request by calling abort()
    const { abort, promise } = player.getVideoByIdFromPlaybackApi({ videoId: '<VIDEO_ID>' });

    try {
        let brightcoveVideoModel = await promise;

        player.loadBrightcoveVideoModel(brightcoveVideoModel);
    } catch (error) {
        console.error('Error loading video:', error);
    }
}

loadVideo('<VIDEO_ID>');
```

--------------------------------

### Include Brightcove SDK via CDN

Source: https://sdks.support.brightcove.com/web-sdk/getting-started/getting-started

Provides script tags to include the Brightcove Web SDK directly from a CDN, offering options for CommonJS, ES Module, and IIFE formats.

```html
<script src="https://players.brightcove.net/sdk/v1/web-sdk/playback/index.cjs.js"></script>
```

```html
<script type="module" src="https://players.brightcove.net/sdk/v1/web-sdk/playback/index.es.js"></script>
```

```html
<script src="https://players.brightcove.net/sdk/v1/web-sdk/playback/index.iife.min.js"></script>
```

--------------------------------

### Import Brightcove Player (Playback-Only/UI)

Source: https://sdks.support.brightcove.com/web-sdk/getting-started/getting-started

Shows how to import the Player class for different use cases: playback-only or playback with UI features, including necessary style imports.

```javascript
import { Player } from '@brightcove/web-sdk/playback';
```

```javascript
import { Player } from '@brightcove/web-sdk/ui';
 import '@brightcove/web-sdk/ui/styles';
```

--------------------------------

### Event Handling API

Source: https://sdks.support.brightcove.com/web-sdk/getting-started/getting-started

Methods for adding and removing event listeners to handle player events.

```APIDOC
## Events

To handle events, add or remove event listeners follow these steps:

### Handle the First Emission of an Event

If you want to handle only the first occurrence of an event, use the `once` method.

```javascript
player.once(Player.Event.PlayerPlaying, (event) => {
    console.log('PlayerPlaying event: ', event);
});
```

### Handle Every Emission of an Event

To handle every emission of an event, use the `addEventListener` method. Below is an example of handling the `PlayerQualityLevelsChanged` event:

```javascript
// Define the event handler function
const handlePlayerQualityLevelsChanged = (event) => {
    console.log('PlayerQualityLevelsChanged event: ', event);
};

// Handle every emission of the PlayerQualityLevelsChanged event
player.addEventListener(Player.Event.PlayerQualityLevelsChanged, handlePlayerQualityLevelsChanged);
```

### Remove Specific Event Listeners

To remove a specific event listener, use the `removeEventListener` method.

```javascript
player.removeEventListener(Player.Event.PlayerQualityLevelsChanged, handlePlayerQualityLevelsChanged);
```

### Remove All Listeners for a Specific Event

To remove all listeners for a specific event, use the `removeAllEventListenersForType` method.

```javascript
player.removeAllEventListenersForType(Player.Event.PlayerQualityLevelsChanged);
```

### Remove All Event Listeners

To remove all event listeners for all events, use the `removeAllEventListeners` method:

```javascript
player.removeAllEventListeners();
```
```

--------------------------------

### Load First Playlist Item

Source: https://sdks.support.brightcove.com/web-sdk/getting-started/getting-started

Loads the initial item from the current playlist into the player. This is typically done after setting the playlist.

```javascript
player.loadBrightcoveVideoModel(playlist.getCurrentItem());
```

--------------------------------

### Import Player UI Styles

Source: https://sdks.support.brightcove.com/web-sdk/getting-started/getting-started

Imports the default CSS styles for the Brightcove player UI. This applies the standard visual appearance to the player.

```javascript
import '@brightcove/web-sdk/ui/styles';
```

--------------------------------

### Import Tizen Project into Tizen Studio

Source: https://sdks.support.brightcove.com/web-sdk/references/samsung

Imports an existing Tizen project into the Tizen Studio workspace. This process involves navigating through the Tizen Studio menus to select the project directory.

```plaintext
1. In Tizen Studio navigate to **File** > **Import** > **General** > **Existing Projects into Workspace**.
2. Select the directory containing the Tizen project.
```

--------------------------------

### Error Handling API

Source: https://sdks.support.brightcove.com/web-sdk/getting-started/getting-started

Methods for listening for error events and checking the player's current error state.

```APIDOC
## Errors

To listen for error events and check the player's current error state, follow these steps:

### Listening for Error Events

```javascript
this.player.addEventListener(Player.Event.PlayerError, (event) => {
  const error = event.error;

  console.log('An error occurred:', error);
});
```
```

--------------------------------

### Initialize Player for Remote Source

Source: https://sdks.support.brightcove.com/web-sdk/getting-started/getting-started

Initializes a new Brightcove Player instance, requiring the account ID even when loading remote media. This sets up the player for subsequent remote video loading.

```JavaScript
const player = new Player({
// accountId is still required even when loading remote media
    accountId: '<ACCOUNT_ID>',
});
```

--------------------------------

### Create Playlist from Remote Sources

Source: https://sdks.support.brightcove.com/web-sdk/getting-started/getting-started

Creates a playlist from an array of remote media sources. This allows for playlist creation using external URLs or other remote data structures.

```javascript
const remotePlaylist = playlistManager.createPlaylistFromRemoteSources(
   /* Array<Source> */
 );
```

--------------------------------

### Create Playlist from Brightcove Video Models

Source: https://sdks.support.brightcove.com/web-sdk/getting-started/getting-started

Creates a playlist using an array of BrightcoveVideoModel objects obtained from the Playback API. This method is used to populate the playlist with specific video content.

```javascript
const videoCloudPlaylist = playlistManager.createPlaylistFromBrightcoveVideoModels(
  /* Array<BrightcoveVideoModel> */
);
```

--------------------------------

### Running Sample Apps for Brightcove Native SDK for iOS/tvOS

Source: https://sdks.support.brightcove.com/search_q=seek-default-long

Instructions on how to run sample apps for the Brightcove Native SDK for iOS/tvOS. These samples serve as a starting point for developing custom applications.

```bash
# Example command to clone a sample app repository (conceptual)
git clone https://github.com/BrightcoveOS/ios-tvos-samples.git
```

--------------------------------

### Attach Player to DOM and Access Integrations

Source: https://sdks.support.brightcove.com/web-sdk/getting-started/getting-started

Attaches the initialized Brightcove player to a specified DOM element and shows how to access individual integrations managed by the IntegrationsManager for further control. Requires an initialized player instance and the player to be attached to the DOM.

```JavaScript
const root = document.querySelector('#player-mount-root');
 player.attach(root);

const { pinningIntegration } = player.getIntegrationsManager();

pinningIntegration.togglePinning();
```

--------------------------------

### Navigate Playlist Items

Source: https://sdks.support.brightcove.com/web-sdk/getting-started/getting-started

Provides methods to navigate through the playlist items, including moving to the next, previous, or a specific item by index, and shuffling the playlist.

```javascript
playlist.moveToNext();
```

```javascript
playlist.moveToPrevious();
```

```javascript
playlist.moveTo(/* index number */);
```

```javascript
playlist.shuffle();
```

--------------------------------

### Get Playlist

Source: https://sdks.support.brightcove.com/roku/guides/roku-sdk-developer-guide

Retrieves a Brightcove playlist through the Playback API. Optionally loads playlist metadata into bcPlayer and starts playback.

```APIDOC
## GET /playlists/{id}

### Description
Retrieves a Brightcove playlist by its ID. This function interacts with the Playback API and can be configured to load the playlist metadata into the `bcPlayer` for playback, optionally starting playback automatically.

### Method
GET

### Endpoint
`/playlists/{id}`

### Parameters
#### Path Parameters
- **id** (STRING) - REQUIRED - Brightcove playlist ID or reference ID. For reference IDs, format as `ref:<reference_id>`.

#### Query Parameters
- **options** (ASSOCIATIVE ARRAY) - OPTIONAL - Additional options to customize behavior.
  - **params** (ASSOCIATIVE ARRAY) - OPTIONAL - Playback API request parameters.
    - **limit** (INTEGER) - OPTIONAL - The number of videos to return.
    - **offset** (INTEGER) - OPTIONAL - The number of videos to skip for pagination.
    - **ad_config_id** (STRING) - OPTIONAL - Include server-side ad insertion configuration.
    - **config_id** (STRING) - OPTIONAL - Apply delivery rules by setting this to the delivery rules ID.
  - **autoload** (BOOLEAN) - OPTIONAL - Specifies whether to load playlist metadata into `bcPlayer`. Defaults to `true`. If `false`, returns a `Node` object containing the response, which can be observed.
  - **autoplay** (INTEGER) - OPTIONAL - The index of the video to start playing after loading. `-1` prevents auto playback. Defaults to `0`. Ignored if `autoload` is disabled.
  - **position** (STRING) - OPTIONAL - Specifies where to load the new metadata if `bcPlayer` already contains content. Possible values: `replace` (default), `append`, `prepend`. Ignored if `autoload` is disabled.
  - **<custom-prop>** (DYNAMIC) - OPTIONAL - Custom properties passed to the response object. Ignored if `autoload` is enabled.

### Request Example
```javascript
// autoload enabled
m.bcPlayer.callFunc("getPlaylist", playlistID, {
  params: {limit: 10, offset: 20},
  autoplay: 3
});

// OR

// autoload disabled
responseNode = m.bcPlayer.callFunc("getPlaylist", playlistID, {
  params: {limit: 10, offset: 20},
  autoload: false,
  myCustomOption: "hello world"
});

if (responseNode !== null && responseNode !== undefined) {
  responseNode.observeField("response", "onPlaylistResponse");
}
```

### Response
#### Success Response (200)
- **response** (Node) - Returned when `autoload` is `false`. Contains the Playback API response.
- **Node** - Contains a `response` field with metadata.

#### Response Example
```javascript
// Inside onPlaylistResponse(ev) callback
response = ev.getData();
if (response.code === 200) {
  options = response.options;
  myCustomOption = options.myCustomOption;
  playlistMetadata = response.body;
  m.bcPlayer.callFunc("load", playlistMetadata, {
    autoplay: 3
  });
}
```

#### Error Response
- **invalid** - Returned if `autoload` is enabled and an invalid state occurs.
```

--------------------------------

### GET /api/videos

Source: https://sdks.support.brightcove.com/roku/guides/roku-sdk-developer-guide

Retrieves a set of Brightcove videos through the Playback API. It can optionally load video metadata into bcPlayer and start playback.

```APIDOC
## GET /api/videos

### Description
Retrieves a set of Brightcove videos through the Playback API and, if configured to do so, loads its metadata into bcPlayer and starts playback. This option is commonly used to programmatically search for Brightcove videos.

### Method
GET

### Endpoint
/api/videos

### Parameters
#### Query Parameters
- **query** (STRING) - REQUIRED - Search query used to retrieve a set of Brightcove videos.
- **options** (ASSOCIATIVE ARRAY) - OPTIONAL - Additional options to customize behaviors.
  - **params** (ASSOCIATIVE ARRAY) - OPTIONAL - Playback API request parameters.
    - **limit** (INTEGER) - OPTIONAL - The number of videos to return.
    - **offset** (INTEGER) - OPTIONAL - The number of videos to skip (for pagination).
    - **sort** (STRING) - OPTIONAL - Field to sort results by.
    - **ad_config_id** (STRING) - OPTIONAL - Include server-side ad insertion.
    - **config_id** (STRING) - OPTIONAL - Include and set equal to the delivery rules id.
  - **autoload** (BOOLEAN) - OPTIONAL - Specifies if videos metadata should be loaded into bcPlayer once the request response is available. Defaults to `true`.
  - **autoplay** (INTEGER) - OPTIONAL - Specifies the index of the video that should start playing when the load process ends. A value of `-1` prevents auto playback. Defaults to `0`. Ignored if `autoload` is disabled.
  - **position** (STRING) - OPTIONAL - Specify the position for loading new metadata. Possible values: `replace` (default), `append`, `prepend`. Ignored if `autoload` is disabled.
  - **<custom-prop>** (DYNAMIC) - OPTIONAL - Custom properties passed to the response object. Ignored if `autoload` is enabled.

### Response
#### Success Response (200)
- **body** (OBJECT) - Contains the videos metadata.
- **options** (OBJECT) - Contains options and custom properties from the response.
- **code** (INTEGER) - HTTP status code of the response.

#### Error Response
- **invalid** - Returned if `autoload` is enabled and an invalid state occurs.

### Request Example
```javascript
// Autoload enabled
m.bcPlayer.callFunc("getVideos", "name:wildlife", {
  params: {limit: 10, offset: 20},
  autoplay: -1
});

// Autoload disabled
responseNode = m.bcPlayer.callFunc("getVideos", "name:wildlife", {
  params: {limit: 10, offset: 20},
  autoload: false,
  myCustomOption: "hello world"
});

if (responseNode !== invalid) {
  responseNode.observeField("response", "onVideosResponse");
}

function onVideosResponse(ev) {
  response = ev.getData();
  if (response.code !== 200) {
    // Handle error
    return;
  }
  options = response.options;
  myCustomOption = options.myCustomOption;
  videosMetadata = response.body;
  m.bcPlayer.callFunc("load", videosMetadata, {
    autoplay: -1
  });
}
```
```

--------------------------------

### Configure Environment Variables for webOS CLI

Source: https://sdks.support.brightcove.com/web-sdk/references/lg

Sets up environment variables in a .zshenv file for VSCode to locate the webOS CLI. This includes setting the LG_WEBOS_TV_SDK_HOME and adding the CLI's bin directory to the PATH.

```shell
# Setting the LG_WEBOS_TV_SDK_HOME variable to the parent directory of CLI
export LG_WEBOS_TV_SDK_HOME="/Users//lg_webos_cli"
if [ -d "$LG_WEBOS_TV_SDK_HOME/CLI/bin" ]; then
# Setting the WEBOS_CLI_TV variable to the bin directory of CLI
  export WEBOS_CLI_TV="$LG_WEBOS_TV_SDK_HOME/CLI/bin"
# Adding the bin directory of CLI to the PATH variable
  export PATH="$PATH:$WEBOS_CLI_TV"
fi
```

--------------------------------

### Create and Start OpenMeasurementTracker

Source: https://sdks.support.brightcove.com/android/reference/javadoc/plugins/ssai/com.brightcove.ssai.omid/-open-measurement-tracker/index

Steps to create an instance of OpenMeasurementTracker and start the tracking session.

```APIDOC
## Create and Start OpenMeasurementTracker

### Description
Creates an `OpenMeasurementTracker` instance using a `Factory` with partner information and the `BaseVideoView`. It then starts the tracking session.

### Method
`OpenMeasurementTracker create(String partnerId, String partnerVersion, BaseVideoView videoView)`
`void start()`

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```java
public class MyActivity extends Activity {

  private OpenMeasurementTracker omTracker;

  @Override public void onCreate(Bundle savedInstanceState) {
    ...

    omTracker = new OpenMeasurementTracker.Factory(
        PARTNER_ID, PARTNER_VERSION, videoView
    ).create();
    omTracker.start();

    ...
  }
}
```

### Response
#### Success Response (200)
N/A (Method returns `OpenMeasurementTracker` instance and starts tracking)

#### Response Example
N/A
```

--------------------------------

### Running a Basic Sample App in Android Studio

Source: https://sdks.support.brightcove.com/getting-started/running-sample-apps-native-sdk-android

This snippet details the steps to run a sample Android application using Android Studio. It involves selecting the project, choosing the target device (emulator or physical device), and initiating the run process. Prerequisites include having the sample app imported into Android Studio and a compatible device connected with USB debugging enabled.

```Java
1. In Android Studio, in the left-side project list, expand the **BasicSampleApp** project.
2. Expand the **java** folder and open the **MainActivity.java** file. 
3. In the project selection dropdown, select the **BasicSampleApp**. 
4. To the right of the project selection dropdown, select the **Run** button. 
5. If you have a device connected to your computer, you should see it listed in the **Select Deployment Target** dialog. Otherwise, after you create a virtual device, you will also see it listed here. Select your device and select **OK**. 
6. You should see the app running on your device or in the emulator.
```

--------------------------------

### CocoaPods Installation for DAI Plugin (iOS)

Source: https://sdks.support.brightcove.com/ios/reference/plugins/dai/index

This example shows how to add the DAI Plugin for Brightcove Player SDK to an iOS project using CocoaPods. It specifies the necessary sources and platform settings for a typical project setup.

```bash
source ‘https://github.com/CocoaPods/Specs'
source ’https://github.com/brightcove/BrightcoveSpecs.git'
platform :ios, ‘14.0’
use_frameworks!

target ‘MyDAIPlayer’ do
  pod ‘Brightcove-Player-DAI’
end
```

--------------------------------

### Install Brightcove SSAI and OpenMeasurement SDKs via CocoaPods

Source: https://sdks.support.brightcove.com/ios/reference/plugins/ssai/index

Instructions for installing the Brightcove SSAI and Open Measurement SDKs using CocoaPods. It shows examples for both Universal Framework and XCFramework installations.

```ruby
pod 'Brightcove-Player-SSAI'
pod 'Brightcove-Player-OpenMeasurement'
```

```ruby
pod 'Brightcove-Player-SSAI/XCFramework'
pod 'Brightcove-Player-OpenMeasurement'
```

--------------------------------

### ThumbnailComponent Setup Methods

Source: https://sdks.support.brightcove.com/android/reference/javadoc/com/brightcove/player/mediacontroller/ThumbnailComponent

Methods for configuring and setting up the preview thumbnail functionality within the Brightcove player.

```APIDOC
## ThumbnailComponent Setup and Configuration

### Description
Methods for setting up the preview thumbnail controller, configuring the thumbnail format selector, preview loader, and thumbnail document creator.

### Methods

#### `setupPreviewThumbnailController()`

##### Description
Finishes setting up the component to support Preview Thumbnail scrubbing. It creates and adds a new `BrightcoveMediaController` with Preview Thumbnail support to the Video View. This method must be called from the UI thread.

##### Method
`void setupPreviewThumbnailController()`

##### Endpoint
N/A (Instance Method)

#### `setThumbnailFormatSelector(PreviewThumbnailFormatSelector selector)`

##### Description
Sets the `PreviewThumbnailFormatSelector`, which is used to select a `PreviewThumbnailFormat` for creating the `ThumbnailDocument`.

##### Method
`void setThumbnailFormatSelector(@NonNull PreviewThumbnailFormatSelector selector)`

##### Parameters
* **selector** (PreviewThumbnailFormatSelector) - Required - The `PreviewThumbnailFormat` selector.

#### `setPreviewLoader(PreviewLoader previewLoader)`

##### Description
Sets a `PreviewLoader` responsible for downloading images and loading them into the Thumbnail View.

##### Method
`void setPreviewLoader(@NonNull PreviewLoader previewLoader)`

##### Parameters
* **previewLoader** (PreviewLoader) - Required - The preview loader instance.

#### `setThumbnailDocumentCreator(ThumbnailDocumentCreator thumbnailDocumentCreator)`

##### Description
Sets the `ThumbnailDocumentCreator` responsible for creating the `ThumbnailDocument`.

##### Method
`void setThumbnailDocumentCreator(@NonNull ThumbnailDocumentCreator thumbnailDocumentCreator)`

##### Parameters
* **thumbnailDocumentCreator** (ThumbnailDocumentCreator) - Required - The `ThumbnailDocument` creator.

### Request Example
```java
// Setup the controller
thumbnailComponent.setupPreviewThumbnailController();

// Set a custom selector (example)
// thumbnailComponent.setThumbnailFormatSelector(new CustomThumbnailFormatSelector());

// Set a custom preview loader (example)
// thumbnailComponent.setPreviewLoader(new CustomPreviewLoader());

// Set a custom document creator (example)
// thumbnailComponent.setThumbnailDocumentCreator(new CustomThumbnailDocumentCreator());
```

### Response
#### Success Response (200)
N/A (Methods do not return a value)

#### Response Example
N/A
```

--------------------------------

### Brightcove SSAI Plugin Quick Start

Source: https://sdks.support.brightcove.com/ios/reference/plugins/ssai/index

This section outlines the essential steps to integrate the Brightcove SSAI Plugin for iOS, from initializing the SDK manager to playing video content with ad insertion.

```APIDOC
## Quick Start

BrightcoveSSAI is a plugin for Brightcove Player SDK for iOS that provides support for Brightcove Server Side Ad Insertion.

```swift
// 1. Initialize companion slots container
let displayContainer = BCOVSSAIAdComponentDisplayContainer(companionSlots: [])

// Get the shared SDK manager
let sdkManager = BCOVPlayerSDKManager.sharedManager()

// 2. Create an SSAI playback controller
// Use nil for viewStrategy if not specified
let playbackController = sdkManager.createSSAIPlaybackController()

// 3. Add the display container as a session consumer
playbackController.add(displayContainer)

// 4. Add the playback controller's view to your video container
// Assuming videoView is your container and playerView is the playback controller's view
// videoView.addSubview(playerView)

// Define playback parameters
let policyKey = "<your-policy-key>"
let accountID = "<your-account-id>"
let videoID = "<your-video-id>"

// Initialize the playback service
let playbackService = BCOVPlaybackService(withAccountId: accountID, policyKey: policyKey)

// Configure the request to find the video
let configuration = [
    BCOVPlaybackService.ConfigurationKeyAssetID: videoID
]
let queryParameters = [
    BCOVPlaybackService.ParamaterKeyAdConfigId: "<valid-ad-config-id>"
]

// 5. Request the video from the Playback Service
playbackService.findVideo(withConfiguration: configuration, queryParameters: queryParameters) { (video: BCOVVideo?, jsonResponse: Any?, error: Error?) in
    if let video {
        // 6. Load the video into the playback controller and play
        playbackController.setVideos([video])
        playbackController.play()
    }
}
```

**Summary of Steps:**
1. Create a `BCOVSSAIAdComponentDisplayContainer` to manage companion ad slots.
2. Use `BCOVPlayerSDKManager.sharedManager().createSSAIPlaybackController()` to create the playback controller.
3. Add the `BCOVSSAIAdComponentDisplayContainer` as a session consumer to the playback controller.
4. Add the playback controller's view to your application's view hierarchy.
5. Request video content using `BCOVPlaybackService`. For certain VMAP URLs, create `BCOVVideo` directly.
6. Set the retrieved video(s) on the playback controller and initiate playback.
```

--------------------------------

### Get AdBreak Absolute Start Position

Source: https://sdks.support.brightcove.com/android/reference/javadoc/plugins/ssai/com.brightcove.ssai.ad/-ad-break/index

Retrieves the absolute start time position of the AdBreak in milliseconds.

```kotlin
open fun getAbsoluteStartPosition(): Long
```

--------------------------------

### Initialize and Configure Brightcove API (BrightScript)

Source: https://sdks.support.brightcove.com/roku/guides/roku-sdk-developer-guide

Initializes the Brightcove API (bcAPI) node, sets up configuration, and observes the 'response' field for incoming data. This example demonstrates setting up the API for general use and specifically for the 'getVideo' method.

```BrightScript
sub init()

' initialize bcAPI node reference
m.bcAPI = createObject("roSGNode", "bcLib:bcAPI")

' setup bcAPI config fields and initiate the bcAPI Task
m.bcAPI.setFields({
  ' ...
  control: "run"
})

' observe bcAPI "response" field to retrieve the response data
' keep in mind that if a response Node isn't provided, all request responses are
' set into the bcAPI response field
m.bcAPI.observeField("response", "onResponse")

' setup the getVideo configuration and initiate it
m.bcAPI.getVideo = {
  id: "<brightcove-video-id>",
  params: {
    ad_config_id: "my-ad-config-id"
  }
}

  ' OR

  ' create a response Node that will be used to "catch" the getVideo response data
  responseNode = createObject("roSGNode", "Node")

  ' create an Associative Array "response" field in this Node
  responseNode.addFields({ response: {} })

  ' observe the just added "response" field to capture the response data
  responseNode.observeField("response", "onResponse")

  ' setup the getVideo configuration, provide the response Node and initiate the API request
  m.bcAPI.getVideo = {
    node: responseNode,
    id: "<brightcove-video-id>",
    params: {
      ad_config_id: "my-ad-config-id"
    }
  }

end sub

sub onResponse(ev)

  response = ev.getData()

  ' handle the "getVideo" request response here
  ' response.id is "getVideo"

end sub
```
Tokens:
Raw