BlendVision Player SDK

Provides an easy way to play the ABR streaming.

How to Install?

There are 2 methods to install BlendVision Player SDK as described below. You can install BlendVision Player SDK through npm:

npm install @blendvision/player

Alternatively, you can refer to an up‐to‐date version on our CDN:

<script src="https://unpkg.com/@blendvision/player"></script>

Polyfills

Note that this project includes no 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 that the browsers you are targeting already support them.

How to Create a Player?

Create an instance of this player class.

<!-- the element where you would like to display the player -->
<div id='my-player'></div>

<script src='https://unpkg.com/@blendvision/player' defer></script>
<script>
  var config = {
    title: 'Title',
    source: '...',
  }
  var Player = BlendVision.default
  var player = Player("my-player", config)
</script>

Source

An object or an array of objects contains {type, src}.

Type: type of manifests
Src: manifest URL of video

[
  {
    type: 'application/dash+xml',
    src: 'https://storage.googleapis.com/shaka-demo-assets/bbb-dark-truths/dash.mpd',
  },
  {
    type: 'application/x-mpegurl',
    src: 'https://storage.googleapis.com/shaka-demo-assets/bbb-dark-truths-hls/hls.m3u8',
  }
]

In iOS browsers and macOS Safari, the player chooses the first HLS manifest and plays with built-in player provided by Apple.

In other browsers, the player looks for the first DASH manifest and plays with MediaSource Extensions.

DRM

To play videos with content protection, you should specify license server URLs and options in drm:

[
  {
    type: 'application/dash+xml',
    src: 'https://storage.googleapis.com/shaka-demo-assets/bbb-dark-truths/dash.mpd',
    drm: {
      widevine: 'https://drm.ex.com/portal',
      playready: 'https://drm.ex.com/portal',
    }
  },
  {
    type: 'application/x-mpegurl',
    src: 'https://storage.googleapis.com/shaka-demo-assets/bbb-dark-truths-hls/hls.m3u8',
    drm: {
      fairplay: {
        licenseUri: 'https://drm.ex.com/portal',
        certificateUri: 'https://drm.ex.com/portal/certificate'
      }
    }
  }
]

Generally, the license server controls access.

The common authorization method is through the HTTP header: Authorization.

In this case, you need to specify headers.

[
  {
    type: 'application/dash+xml',
    src: 'https://storage.googleapis.com/shaka-demo-assets/bbb-dark-truths/dash.mpd',
    drm: {
      widevine: {
        licenseUri: 'https://drm.ex.com/portal',
        headers: {
          Authorization: `Bearer ${token}`
        }
      }
    }
  },
  {
    type: 'application/x-mpegurl',
    src: 'https://storage.googleapis.com/shaka-demo-assets/bbb-dark-truths-hls/hls.m3u8',
    drm: {
      fairplay: {
        licenseUri: 'https://drm.ex.com/portal',
        certificateUri: 'https://drm.ex.com/portal/certificate'
        headers: {
          Authorization: `Bearer ${token}`
        },
        certificateHeaders: {
         Authorization: `Bearer ${token2}`
        }
      }
    }
  }
]

Analytics

Give the analytics token, the player would send all events to the BlendVision Analytics.

var player = kksPlayer("my-player", {
  modulesConfig: {
    'analytics.token': 'analytics-token'
  }
})

Features & Definition

Play

This method plays a video.

player.play()

It returns a Promise:

// Playing may be not allowed if we violate the autoplicy policy
player.play().catch(error => {
  console.error(error)
})

The more infomation about autoplay policy is here.

Pause

This method pauses the playback of a video.

player.pause()

Current time

This method gets the current playback position of a video.

var current = player.currentTime()

Seek

This method sets the current playback position in seconds.

player.seek(50) // Set the current playback position to 50 seconds

Forward

This method seeks forward the current playback position in seconds.

player.forward() // Forward 10 seconds
player.forward(100) // Forward 100 seconds

Rewind

This method rewinds the current playback position in seconds.

player.rewind() // Rewind 10 seconds
player.rewind(100) // Rewind 100 seconds

getVolume

This method gets the volume level.

var current = player.getVolume() // `current` is the current volume

setVolume

This method sets the volume level of player on a scale from 0 to 1.

player.setVolume(0.5) // Set volume to 50%

Mute

This method mutes the player.

player.mute() // Mute the player

Unmute

This method unmutes the player.

player.unmute() // Unmute the player

getCurrentQuality

This method gets the current quality which player uses.

player.getCurrentQuality()

getQualities

This method gets the all qualities.

player.getQualities()

setQuality

This method sets the quality to player.

player.setQuality({maxHeight: 1080, minHeight: 1080}) // 1080p
player.setQuality({maxHeight: 360, minHeight: 360}) // 360p
player.setQuality(null) // auto

getSubtitles

This method gets all subtitle(s) of a video.

player.getSubtitles() // [{id: 2, kind: 'text', name: 'English', language: 'en', enabled: false}]

getCurrentSubtitle

This method gets the current playback subtitle.

Return off if no any subtitle is active.

player.getCurrentSubtitle() // {language: 'en'} | 'off'

setSubtitle

This method sets the playback subtitle.

player.setSubtitle('en') // Open `en` subtitle
player.setSubtitle('off') // Close the subtitle

Release

This method removes the player.

player.release() // Release the player

Google Cast Integration

The player SDK includes integration to Google Cast Sender SDK, to enable the integration, specify castReceiverAppId in the config.

The Cast receiver player plays with DASH manifest, so you should provide DASH manifest URL in source.

Example

const config = {
  source: [ /* ... */ ],
  castReceiverAppId: '',
}
const player = Player("my-player", config)

Documentation

The complete API documentation is here.

If you want to integrate BlendVision One Platform quickly, you can refer to here.