Claude CodeのBitmovinプラグインでWeb PlayerのDRM・広告・分析を組み込む

BitmovinはWeb Player SDKの組み込み方をClaudeに教えるスキルを、bitmovin/skills リポジトリで公開しています。Claude Codeにはプラグインとして入れられ、「HLSを再生して」「Widevineで保護したDASHを流したい」「プリロールを入れたい」といった依頼で自動的に読み込まれます。

導入は2コマンドです。入れたあとに効くのは、v8とPlayer Web Xの使い分け、Next.jsでのSSR対策、DRMや広告の設定の書き方といった、生成コードが外しやすい部分の指針です。

Bitmovinプラグインで何が変わるか

マーケットプレイスのプラグインページは、このプラグインを「Anthropic verified」と表示し、Web Player SDK(v8とPlayer Web X)の組み込みを教えるものと説明しています。範囲はインストール、DRM、広告、分析、字幕、React・Next.js・Vueのパターン、よくある落とし穴です。

リポジトリ側がこのスキルを作った理由として挙げているのは、Bitmovin Player Webについて、LLMの知識が古い、または混乱していることです。スキルが先回りして防ぐ失敗は次のとおりです。

• 存在しないnpmパッケージ名(@bitmovin/player)を書く。正しくは bitmovin-player
• 現行のv8でもUIの手動配線が必須だと思い込む
• Next.jsでSSR対策なしにインポートして落とす
• 古いドキュメントURLを案内する
• v8とPlayer Web XのAPIを同じコードに混ぜる

どれもSDKを知らないモデルが自信満々に書きがちな間違いで、スキルがあれば最初から避けられます。

導入手順

Claude Codeでは、Bitmovinのマーケットプレイスを追加してからプラグインを入れます。

/plugin marketplace add bitmovin/skills
/plugin install bitmovin-player-web@bitmovin

/plugin marketplace add はGitHubの owner/repo を受け取る標準コマンドです。/plugin install はセッション内で実行しても即インストールにはならず、プラグインの詳細パネルが開いて、内容の確認とスコープの選択ができます。マーケットプレイスの仕組みはClaude Codeプラグイン化の移行手順に、プラグインの動かし方はskills-directoryでプラグインを動かす手順にあります。

claude.comのプラグインページにはClaude Code用のボタンがあり、公式ドキュメントによると、押すとシェル形式のインストールコマンドがコピーされます。上の2コマンドはリポジトリのREADMEが案内する経路で、どちらでも入れられます。

入れたあとは、Claude Codeに「どんなスキルが使える?」と尋ねます。リポジトリは、この質問でインストールしたスキルが一覧に出ることを確認方法として案内しています。

プラグインを使わず、スキル単体を入れる経路もあります。

npx skills add bitmovin/skills --skill bitmovin-player-web

このリポジトリはskills.shの形式に対応しており、CursorやCodexなど他のAIツールにも同じスキルを入れられます。

どのスキルを入れるか

リポジトリのスキルは、1スキルにつき1プラグインです。Webプレイヤーの組み込みだけなら bitmovin-player-web で足ります。READMEが「Available」とするスキルは次の9つです。

READMEは一覧の末尾にもう1行、汎用の動画開発ガイドを「Planned」として載せています。まだ使えません。

このうち分析の組み込みは bitmovin-player-web の中に基本の設定があり、より踏み込んだ導入は bitmovin-observability-collector-integration が受け持ちます。広告の運用レポートや品質調査の2つは、Bitmovin Observability MCPを使う前提のスキルです。

v8とPlayer Web Xをどう選ぶか

スキルはまずv8を既定にします。Player Web X(PWX)について尋ねるのは、選択が実装を左右するときだけです。

• v8(bitmovin-player): 安定版です。HLS・DASH・Smooth・WHEP、DRM、広告、分析、字幕、Chromecast、AirPlayに対応します
• PWX(@bitmovin/player-web-x): 次世代のモジュール式です。スキルは「まだ発展途上で機能が揃っていない」と明記しています

スキルが書く現状では、PWXのDRMは未完成で、確かめてから約束するよう促されています。VMAPも実験的で、安定して使えるのはVAST、Smooth Streamingは非対応です。本番でDRMや広告を使うなら、v8のまま進めるのが基本になります。

DRMを組み込む

DRMはソース設定に drm を足すだけで、ライセンス取得はプレイヤーが処理します。スキルが示す形は次のとおりです。

await player.load({
  dash: 'https://cdn.example.com/encrypted.mpd',
  drm: {
    widevine: { LA_URL: 'https://license.example.com/widevine' },
    playready: { LA_URL: 'https://license.example.com/playready' },
    fairplay: {
      LA_URL: 'https://license.example.com/fairplay',
      certificateURL: 'https://license.example.com/fairplay/cert',
    },
  },
});

スキルの説明では、Widevineの対象はChrome・Firefox・Edge・Android、PlayReadyはWindowsのEdgeと一部のスマートTV、FairPlayはSafari(macOSとiOS)です。複数のDRMを並べておけば、プレイヤーが環境に合うものを選びます。

FairPlayはHLSと組み合わせ、Widevineの例はDASHと組み合わせます。Claude Codeに頼むときは、配信形式と対象ブラウザを先に伝えると、不要なDRMを書かせずに済みます。

広告を組み込む

広告はVAST、VMAP、IMA SDKの組み込みに対応します。既定ではGoogle IMA SDKが使われ、Google Ad Managerのようなサーバーと組むなら、プログラマティックな需要やActiveViewの計測が使えるのでIMAが向くとスキルは説明しています。Google以外の広告サーバーでは、Bitmovin Advertising Module(BAM)に切り替える選択肢があります。BAMは、広告まわりのUIを細かく作り込みたいときにも向きます。

プリロール・ミッドロール・ポストロールは、advertising.adBreaks に並べます。

const player = new Player(container, {
  key: 'YOUR_LICENSE_KEY',
  advertising: {
    adBreaks: [
      { tag: { url: 'https://example.com/vast-preroll.xml', type: 'vast' }, position: 'pre' },
      { tag: { url: 'https://example.com/vast-midroll.xml', type: 'vast' }, position: '50%' },
      { tag: { url: 'https://example.com/vast-postroll.xml', type: 'vast' }, position: 'post' },
    ],
  },
});

position は割合のほか、秒数('90' は1分30秒)でも指定できます。広告をあとから動的に差し込む設計なら、advertising: {} で広告機能だけ有効にしておき、player.ads.schedule(...) で予約します。VMAPのようにサーバー側が広告の配置を決める場合は、type: 'vmap' のタグを1つ渡します。

分析を組み込む

Bitmovin Analyticsはプレイヤーに同梱されています。分析用のライセンスキーを渡すと有効になります。

const player = new Player(container, {
  key: 'YOUR_PLAYER_KEY',
  analytics: {
    key: 'YOUR_ANALYTICS_KEY',
    title: 'My Video',
    videoId: 'video-123',
    customData1: 'category-sports',
  },
});

無効にするには analytics: false を指定します。プレイヤーのキーと分析のキーは別物です。Claude Codeに「アナリティクスも入れて」と頼むときは、どちらのキーをどこに置くかも指示しておくと、取り違えを避けられます。

生成されたコードで確かめたい落とし穴

スキルは「よくある間違い」を9つ挙げています。生成コードのレビューでは、特に次の点を確かめると手戻りが減ります。

• アンマウント時に player.destroy() を呼んでいるか。プレイヤーはDOMとイベントリスナーを作るため、呼び忘れると残ります
• 自動再生を使うなら muted: true が付いているか。ブラウザはミュート解除の自動再生を止めます
• player.load() を待たずに次の load() や状態取得をしていないか
• ライセンスキーをソースにベタ書きしていないか。クライアント向けSDKなのでキー自体はブラウザに出ますが、リポジトリには残さない運用が前提です
• UIを自前で配線する場合、ui: false を設定し、UIを必ず付けているか

Reactでは、プレイヤーを一度だけ作り、ソースの切り替えは別のエフェクトで load する形がスキルの推奨です。source.hls のような一部のプロパティだけを依存配列にすると、DRM・字幕・ポスターの変更を取りこぼします。

UIについては、Web 8.245.0以降は既定のUIがUI v4になり、標準的な構成なら UIFactory の手動配線は要りません。古いバージョンに固定している既存プロジェクトでは、この前提が当てはまらないので、先に bitmovin-player のバージョンを確認させます。

最新のAPIはドキュメントMCPで確かめる

スキルは、自分が扱わない細部や最近のリリースについて、推測せずBitmovinのドキュメントMCPを参照するよう指示しています。エンドポイントは https://agentic.bitmovin.com/documentation/mcp で、developer.bitmovin.com の文書と公式サンプルのリポジトリを検索できます。

プラグインを入れただけでは、このMCPは自動では接続されません。使うには、Claude Codeに別途MCPサーバーとして追加します。

claude mcp add --transport http bitmovin-docs \
  https://agentic.bitmovin.com/documentation/mcp

MCPを繋がなくても、スキルは developer.bitmovin.com のページを直接取りに行く案内を用意しています。Claude Codeの全体像を押さえておくと、MCPの追加先(スコープ)も選びやすくなります。

手元で動作確認するときの流れ

スキルには開発用の公開テストストリームも載っています。たとえばHLSなら、https://bitmovin-a.akamaihd.net/content/sintel/hls/playlist.m3u8 のSintelが使えます。localhost はライセンスの許可リストに自動で含まれるため、手元の確認ではドメイン登録は要りません。公開するドメインは、Bitmovinのダッシュボードの許可リストに追加します。

依頼は、段階を分けると結果を確認しやすくなります。

1. まずHLSの再生だけを作らせ、テストストリームで映るか確かめる
2. 次に、配信形式と対象ブラウザを指定してDRMを足す
3. 最後に広告と分析を足す。広告タグは、本番とは別の検証用のものを使う

DRMのライセンスサーバーURLやトークンのような機密値は、Claude Codeに貼らず、環境変数から読む形にしてもらいます。

まとめ

Bitmovinプラグインは、SDKの知識が古いモデルが外しやすい点(パッケージ名、SSR、UIの配線、v8とPlayer Web Xの混在)を先に塞ぎます。DRM・広告・分析は、v8を前提にソース設定とプレイヤー設定へ数行足す形で組み込めます。

最新の挙動を確かめたいときはドキュメントMCPを足す、本番のDRMや広告はv8で進める、ライセンスサーバーの機密値は渡さない。この3点を決めておけば、依頼の精度が安定します。