![How to use 3rd party player to play BlendVision One VOD with DRM](https://cdn.prod.website-files.com/63c8f2a5e7a1f60637888f3f/65f2cef42e34e69e48821675_3rd%20party%20player_video.js.webp)
How to use 3rd party player to play BlendVision One VOD with DRM
2024-03-04
|
The following step by step tutorial is a sample project to demonstrate how to integrate BlendVision One DRM with video.js + React.
Prerequisites
A Valid BlendVision One Account (Contact us)
1. How to Get Your API Token and Organization ID
- Login to your BlendVision One console
- Navigate to Developers > API Tokens
- Click on the Create New API Token
- Set the Expiration Date. You can set it to never or set a date on your needs.
- Copy the API Token and Organization ID from the dialog
![](https://cdn.prod.website-files.com/63c8f2a5e7a1f60637888f3f/65e550f5974e5d70d020a740_3rd%20party%20player%201.webp)
2. How to Get Your Content ID
- Navigate to VOD
- Find the video that you want and click
- Copy the VOD ID under Preview in General
- Check if the VOD DRM is enabled
![](https://cdn.prod.website-files.com/63c8f2a5e7a1f60637888f3f/65e5510b37f1fa6bedef410c_3rd%20party%20player%202.webp)
![](https://cdn.prod.website-files.com/63c8f2a5e7a1f60637888f3f/65e5511549485b75750a0dc6_3rd%20party%20player%203.webp)
![](https://cdn.prod.website-files.com/63c8f2a5e7a1f60637888f3f/65e5511f36df4f46ddffa8cd_3rd%20party%20player%204.webp)
3. How to Get Your Content DASH/HLS URL
- Get the Sample code from Github: https://github.com/BlendVision/bv-api-samples-python
- Copy the code from “get_content_info.py”
- Replace the Environment variable with your own value in the following code
$ python3 get_content_info.py --content_id $BV_CONTENT_ID --api_key $BV_ONE_API_KEY --org_id $BV_ONE_ORG_ID - ~BV_CONTENT_ID=your_content_id
- ~BV_ONE_ORG_ID=your_org_id
- ~BV_ONE_API_KEY=your_api_key
- Run the code and copy the DASH URL and HLS URL
![](https://cdn.prod.website-files.com/63c8f2a5e7a1f60637888f3f/65e55149df469e7b9f8b9845_3rd%20party%20player%205.webp)
4. How to Get Your DRM Playback Token
- Get the Sample code from Github: https://github.com/BlendVision/bv-api-samples-python
- Copy the code from “get_playback_token.py”
- Replace the Environment variable with your own value in the following code
python3 get_playback_token.py --content_id $BV_CONTENT_ID --api_key $BV_ONE_API_KEY --org_id $BV_ONE_ORG_ID - ~BV_CONTENT_ID=your_content_id
- ~BV_ONE_ORG_ID=your_org_id
- ~BV_ONE_API_KEY=your_api_key
- Run the code and copy the DRM Playback Token
![](https://cdn.prod.website-files.com/63c8f2a5e7a1f60637888f3f/65e5515858e588277c4774d0_3rd%20party%20player%206.webp)
5. Demo with Video.js + React sample player
- Check out the code from BlendVision Github: https://github.com/BlendVision/drm-client-samples/tree/player_setting
- Clone this repository
git clone https://github.com/BlendVision/drm-client-samples.git - Open the index.js file with following code
cd drm-client-samples > subl . - Copy and paste those ID, token and url from Step 1 to 4 in the single quotes of following parameters:
- ~orgId = your_org_id
- ~apiKey = your_api_key
- ~resourceID = your_content_id
- ~manifest_url_dash = your_dash_url
- ~manifest_url_hls = your_hls_url
- ~playbackToken = your_drm_playback_token
- Install dependencies: yarn or npm install
- Start development server with following code(use npm install as example)
- ~cd video-js-react > npm install > npm run dev
- Open http://localhost:3000 in your browser and you’ll find a video with DRM protection if successfully integrated with video.js + React.
![](https://cdn.prod.website-files.com/63c8f2a5e7a1f60637888f3f/65e55171094585887dca4726_3rd%20party%20player%207.webp)
![](https://cdn.prod.website-files.com/63c8f2a5e7a1f60637888f3f/65e55182dd0e018bff0406d4_3rd%20party%20player%208.webp)
![](https://cdn.prod.website-files.com/63c8f2a5e7a1f60637888f3f/65e5519017508dd83cea067e_3rd%20party%20player%209.webp)
![](https://cdn.prod.website-files.com/63c8f2a5e7a1f60637888f3f/65e5519e7f7481b874de8fce_3rd%20party%20player%2010.webp)
![](https://cdn.prod.website-files.com/63c8f2a5e7a1f60637888f3f/65e551a70d5bd9279993f7c4_3rd%20party%20player%2011.webp)
Get Started Today.
Fill in the form and one of our consultants will help you shape your video strategy.