BlendVision Player SDK

The BlendVision Player SDK is a web video player which supports video playback. You can check the demo here.

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 @web-kks/blendvision-player-sdk-for-web

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

<script src="https://unpkg.com/@web-kks/blendvision-player-sdk-for-web"></script>

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/@web-kks/blendvision-player-sdk-for-web'></script>
<script>
  var config = {
    title: 'Title',
    source: '...',
  }
  var player = BlendVision.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: 'dash',
    src: 'https://storage.googleapis.com/shaka-demo-assets/bbb-dark-truths/dash.mpd',
  },
  {
    type: 'hls',
    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: 'dash',
    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: 'hls',
    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'
      }
    }
  }
]

source.drm.widevine.level

Due to the best compatibility, in most situations, there’s no need to set Widevine level.

Actual robustness/security level is determined by the browser, it may use L3 even if L1 works well.

When you view the below message in the console on Chrome, it is safe to ignore.

It is recommended that a robustness level be specified. Not specifying the robustness level could result in unexpected behavior, potentially including failure to play.

• In the case of hardware based content protection(L1) is required, please set HW_SECURE_DECODE.
• If you have a list of devices that don't play well with L1, please set SW_SECURE_DECODE to force L3.
• For advanced or experimental usage, the possible value is one of SW_SECURE_CRYPTO, SW_SECURE_DECODE, HW_SECURE_CRYPTO, HW_SECURE_DECODE, and HW_SECURE_ALL, which is specific to Widevine and not supported in other key systems.

Features & Definition

Play

This method plays a video.

player.play()

Pause

This method pauses the playback of a video.

player.pause()

Seek

This method sets the current playback position in seconds, or gets the current playback position of a video.

player.seek(50) // Set the current playback position to 50 seconds
var current = player.seek() // `current` is the current position in 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

UI Controls

This method sets the UI state if state is given, or gets current UI state.

player.uiControls('SHOW') // Show UI
player.uiControls('HIDE') // Hide UI
player.uiControls('AUTOHIDE') // Make UI auto hide
var current = player.uiControls() // `current` is the current UI state

Volume

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

player.volume(0.5) // Set volume to 50%
var current = player.volume() // `current` is the current volume

Mute

This method mutes the player.

player.mute() // Mute the player

Unmute

This method unmutes the player.

player.unmute() // Unmute the player

Release

This method removes the player.

player.release() // Release the player