メインコンテンツまでスキップ

Video Player

This guide will walk you through the steps to start a BlendVision streaming playback via the Web player SDK.

Prerequisites

Basic front-end web application development knowledge is required.

You may also start with the basic sample.

Step 1: Initialize the Player

Install Player SDK

You can install the BlendVision Web Player SDK token in the following two methods:

Using Node Package Manager.

npm install @blendvision/player@version react react-dom

Currently react, react-dom are required since the player is built with React. In the future, React dependency requirments will be required only if built-in player UI is used.

Notes
  • This package does not include polyfills by default. If you use any other ES6+ features that need runtime support (such as Array.at()), make sure you are including the appropriate polyfills manually, or the target browsers have already supported them.

Create a Player

To play the streaming content, create a player instance with the BlendVision player license key and stream information in the initialization configuration:

import {createPlayer} from '@blendvision/player'
// if using CDN: const {createPlayer} = window.BlendVision

// It inserts a video element to div id="player-container"
const player = createPlayer('player-container', {
// license: 'player license key',
// license key is not required when testing in local development environment
// make sure to specify one before deployments
source: [
{
type: 'application/dash+xml',
src: 'Your_DASH_URL',
},
{
type: 'application/x-mpegurl',
src: 'Your_HLS_URL',
}
],
})

If you are developing a React application, there is a React integration guide available, and recommended.

If you are using another UI library/framework, like Vue or Angular, you can refer to the integration guide for other UI libraries & frameworks.

Before proceeding to next steps for BlendVision playback workflow integration, you may also try a DASH / HLS video URL here to see if the integration works.

Step 2: Obtain a Playback Token​

Create an admin playback token via BlendVision One API:

Query ParametersRequiredDescription
resource_idRequiredThe unique ID of your content. Use BlendVision One API to get your content’s unique IDs.
VOD: GET /bv/cms/v1/vods
Live: GET /bv/cms/v1/lives
resource_typeRequiredThe streaming type of your content.
customer_idOptionalIdentify who is watching the content through your custom user ID.
This parameter is required if the content's security privacy is set to SECURITY_PRIVACY_TYPE_TOKEN.
const resourceId = ''
const resourceType = ''
const customerId = ''

// response {token: '...'}
const {token: playbackToken} = await fetch(
`https://api.one.blendvision.com/bv/cms/v1/tokens`,
{
method: 'POST',
body: JSON.stringify({
resource_id: resourceId,
resource_type: resourceType,
customer_id: customerId,
}),
headers: {
Authorization: 'Bearer ${CMS_Token}'
}
}
).then(res => res.json())

Step 3: Start a Playback Session

Start a playback session and obtain the streaming data via BlendVision One API:

Replace the sample URLs in Step 1 with the obtained manifest_url (dashUrl, hlsUrl) for playback.

const headers = {
Authorization: playbackToken,
}
const deviceId = uuidv4();

const sessionInfo = await fetch(
`https://api.one.blendvision.com/bv/playback/v1/sessions/${deviceId}:start`,
{method: 'POST', headers}
).then(res => res.json())

const streamInfo = await fetch(
`https://api.one.blendvision.com/bv/playback/v1/sessions/${deviceId}`,
{headers}
).then(res => res.json())

const {manifests} = streamInfo.sources[0]
const dashUrl = manifests.find(manifest => manifest.protocol === 'PROTOCOL_DASH')?.url
const hlsUrl = manifests.find(manifest => manifest.protocol === 'PROTOCOL_HLS')?.url

You can load manifest URLs with player.load:

player.load([
{
type: 'application/dash+xml',
src: dashUrl,
},
{
type: 'application/x-mpegurl',
src: hlsUrl,
}
])

If you want to play a DRM enabled video, you can refer to the DRM guide.

Step 4: Manage the Lifecycle of a Playback Session

To keep the playback session alive, routinely invoke the heartbeat API every 10 seconds to prevent session expiration:

setInterval(async () => {
const heartbeatResult = await fetch(
`https://api.one.blendvision.com/bv/playback/v1/sessions/${deviceId}:heartbeat`,
{headers}
)

if (!heartbeatResult.ok) {
player.release()
}
}, 10000)

const endPlayback = () =>
fetch(
`https://api.one.blendvision.com/bv/playback/v1/sessions/${deviceId}:end`,
{headers}
)

Workflow Sequence Diagram