Introduction

BlendVision Web Player SDK offers a rich set of APIs that enable you to control and customize the playback experience, designed to seamlessly integrate with the player into your website.

Getting Started

To begin your journey with Web Player SDK APIs, follow this guide to install the SDK and initialize the player.

API Overview

Control the Player

The APIs allow you to control the behaviors of the player. Below are some examples:

• Start the playback: player.play()
• Pause the playback: player.pause()
• Seek to the 30th second of the media: player.seek(30)

Additionally, APIs with a set prefix enable you to define parameters for player behaviors. Below are some examples:

• Set the playback volume to 50%: player.setVolume(0.5)
• Set the playback speed to 1.25x: player.setPlaybackSpeed(1.25)

Get Information

The APIs with a get prefix allow you to retrieve the media information and the playback status. Below are some examples:

• Get the total duration of the media: player.getDuration()
• Get the current playback speed: player.getPlaybackSpeed()

Track Event

The APIs allow you to register listeners to track the event logs:

const player = createPlayer('player-container', {
  license, // license is not required when testing in local development environment
  source: [
    {type: 'application/dash+xml', src: dashUrl},
    {type: 'application/x-mpegurl', src: hlsUrl},
  ],
  onPlaylogFired: (event) => {
    // Your own log service integration here
    console.debug("onPlayLogFired", event)
  }
})

You can gain valuable insights into your content performance and perform customized actions when events are triggered.

Multiple Players Targeting

In situations where you have more than one player on single page of your website, it's essential to specify which player you would like to interact with.

To create multiple players, add HTML container elements first:

<div id="player-container0">
</div>

<div id="player-container1">
</div>

Create a player with container elements, and hold player instances with different variables:

import {createPlayer} from '@blendvision/player'

const player0 = createPlayer('player-container0', {
  license, // license is not required when testing in local development environment
  source: [
    {
      type: 'application/dash+xml',
      src: 'https://d2mxta927rohme.cloudfront.net/376c618f-b27a-4a3d-9457-ad7076ee87e3/vod/dea931c3-8766-477d-a87b-1c3f91490139/vod/dash.mpd', //dashUrl
    },
    {
      type: 'application/x-mpegurl',
      src: 'https://d2mxta927rohme.cloudfront.net/376c618f-b27a-4a3d-9457-ad7076ee87e3/vod/dea931c3-8766-477d-a87b-1c3f91490139/vod/hls.m3u8', //hlsUrl
    }
  ],
})

const player1 = createPlayer('player-container1', {
  license, // license is not required when testing in local development environment
  source: [
    {
      type: 'application/dash+xml',
      src: 'https://d2mxta927rohme.cloudfront.net/376c618f-b27a-4a3d-9457-ad7076ee87e3/vod/dea931c3-8766-477d-a87b-1c3f91490139/vod/dash.mpd', //dashUrl
    },
    {
      type: 'application/x-mpegurl',
      src: 'https://d2mxta927rohme.cloudfront.net/376c618f-b27a-4a3d-9457-ad7076ee87e3/vod/dea931c3-8766-477d-a87b-1c3f91490139/vod/hls.m3u8', //hlsUrl
    }
  ],
})

player1.mute()
player0.seek(20)

Note

• In some platforms like Android Chrome, DRM resources are limited and only one video with content protection can be displayed, others will be rendered greedy or black.