# BlendVision Player SDK

The BlendVision Player SDK is a web video player which supports video playback. You can check the demo [here](https://playcraft-v1-10-0-canary-0-ii72jy5u8-kksweb.vercel.app/player-sdk?autoplay=true&mockContentId=2).

## How to Install?

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

```bash
npm install @web-kks/blendvision-player-sdk-for-web
```

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

```html
<script src="https://unpkg.com/@web-kks/blendvision-player-sdk-for-web"></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](https://github.com/zloirock/core-js/blob/master/README.md), or that the browsers you are targeting already support them.

## How to Create a Player?

Create an instance of this player class.

```html
<!-- 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' 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

```js
[
  {
    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:

```js
[
  {
    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](https://bugs.chromium.org/p/chromium/issues/detail?id=720013).

> 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.

```js
player.play()
```

### Pause

This method pauses the playback of a video.

```js
player.pause()
```

### Seek

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

```js
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.

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

### Rewind

This method rewinds the current playback position in seconds.

```js
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.

```js
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.

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

### Mute

This method mutes the player.

```js
player.mute() // Mute the player
```

### Unmute

This method unmutes the player.

```js
player.unmute() // Unmute the player
```

### Release

This method removes the player.

```js
player.release() // Release the player
```
