@blendvision/player v2.15.0
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.
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
1 year ago
12 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
11 months ago
11 months ago
12 months ago
12 months ago
1 year ago
12 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
11 months ago
11 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago