@blendvision/player v2.2.0
BlendVision Player SDK
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}`
}
}
}
}
]
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() // [{language: 'en'}, {language, 'ja'}]
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
Documentation
The complete API documentation is here.
If you want to integrate BlendVision One Platform quickly, you can refer to here.
2 days ago
11 days ago
13 days ago
19 days ago
20 days ago
24 days ago
27 days ago
27 days ago
26 days ago
27 days ago
26 days ago
1 month ago
1 month ago
1 month ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
9 months ago
9 months ago
8 months ago
9 months ago
10 months ago
10 months ago
8 months ago
9 months ago
8 months ago
6 months ago
7 months ago
7 months ago
8 months ago
8 months ago
8 months ago
6 months ago
8 months ago
6 months ago
6 months ago
7 months ago
7 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
7 months ago
7 months ago
6 months ago
6 months ago
7 months ago
9 months ago
7 months ago
8 months ago
9 months ago
6 months ago
8 months ago
7 months ago
7 months ago
6 months ago
10 months ago
8 months ago
8 months ago
8 months ago
7 months ago
8 months ago
7 months ago
7 months ago
7 months ago
8 months ago
6 months ago
6 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
9 months ago
8 months ago
9 months ago
9 months ago
9 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
12 months ago
12 months ago
12 months ago
12 months ago
11 months ago
12 months ago
11 months ago
1 year ago
1 year ago
1 year ago