如何使用第三方播放器播放具 DRM 保護的 BlendVision One VOD

‍

以下是一個教學範例，旨在展示如何將 BlendVision One DRM 與 video.js + React 整合。

‍

前置準備

先申請一個有效的 BlendVision One 帳號（聯絡我們）

‍

1. 如何獲取您的 API Token 和組織 ID

• 登入到您的 BlendVision One 後台
• 在左側面版找到開發人員 > API Token
• 點擊建立新 API Token
• 設定到期日。您可以將其設定為「不指定」或根據您的需求設定一個日期。
• 從對話框中複製 API Token 和組織 ID

‍

2. 如何獲取您的內容 ID

• 在左側面版找到 VOD
• 找到您想要的影片並點擊
• 在「預覽」下找到 VOD ID 並複製
• 去「內容保護」檢查 VOD DRM 是否啟用

‍

3. 如何獲取您的內容DASH/HLS URL

• 從 Github 獲取範例程式碼：https://github.com/BlendVision/bv-api-samples-python
• 複製 “get_content_info.py” 中的程式碼
• 在以下程式碼中用您的值替換環境變量
  $ 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

• 運行程式碼並複製 DASH URL和 HLS URL

‍

4. 如何獲取您的DRM播放令牌

• 從 Github 獲取範例程式碼：https://github.com/BlendVision/bv-api-samples-python
• 複製 “get_playback_token.py” 中的程式碼
• 在以下程式碼中用您的值替換環境變量
  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

• 運行程式碼並複製 DRM Playback Token

5. 使用Video.js + React示例播放器演示

• 從 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

• 打開以下程式碼的 index.js 文件
  cd drm-client-samples > subl .

• 將第 1 至 4 步中的 ID、Token 和 URL 複製並貼到以下參數中：

• ~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 或 npm install
• 用下列的程式碼啟動開發服務器（以 npm install 為例）
• ~cd video-js-react > npm install > npm run dev

• 在您的瀏覽器中打開 http://localhost:3000，如果成功與 video.js + React 整合，您將看到一個有 DRM 保護的影片。