コンテンツにスキップ

埋め込みHTMLを使ったサイト埋め込み

← クイックスタートへ戻る

埋め込みには「ページ埋め込み用 (embedded)」のAPIキーを使い、「アクセス許可ドメイン」に自サイトを登録してください。ドメイン照合は補助機能で、Referer / Originがない要求は許可されます。

事前準備（初回のみ）

  1. 組織管理者でユーザー一覧 /filmaadmin/user を開く ユーザー一覧 画面
  2. 埋め込み用のAPIユーザー（新しい組織では API_EMBEDDED）を開く。従来の API_READ_ONLY を使う場合は、名前ではなく現在のAPI種類を確認する
  3. 「APIキー」をクリックして「API設定編集」(/filmaadmin/apisettings/edit/:user_id) を開く API設定編集（アクセス許可ドメインの設定）
  4. API種類が「ページ埋め込み用 (embedded)」であることを確認する。既存キーを変更する前に、一般APIや古いプレイヤーで併用していないか確認する
  5. 「アクセス許可ドメイン」に自サイトのドメイン名を1行につき1件で登録（例: example.com, app.example.com）
  6. URLで入力しても保存時にドメイン名（ホスト部）へ自動変換されます
  7. example.com と入力すると、その配下のサブドメイン（www.example.com / app.example.com など）も許可されます
  8. 特定のサブドメインのみ許可したい場合は app.example.com のようにサブドメインまで入力してください
  9. 間違った形式はエラーになります
  10. 「保存」を押す。embeddedでは「アクセス許可IP／CIDR」は適用されず、入力欄も操作不可になる

管理画面の埋め込みHTMLには、有効なembeddedキーが優先して使われます。現行プレイヤーがキーを動画限定JWTへ交換し、そのJWTでDASH・HLS・DRMを利用します。一般APIやダウンロードには使えません。

embeddedキーがない場合は既存のreadonlyキーを使用してHTMLが生成されますが、URL認証の制限により再生できない場合があります。埋め込み用APIユーザーを用意してからHTMLをコピーしてください。

埋め込みHTMLの取得と貼付け

  1. ファイル詳細 /filmaadmin/file/detail/:file_id を開く ※「派生メディア」は折りたたみ表示のため、見出しをクリックして開きます。 ファイル詳細 → 派生メディア（埋め込みHTMLボタン）
  2. 「派生メディア」表の 対象解像度行で「埋め込みHTMLをコピー」
  3. コピーしたHTMLを自サイトに貼り付け

埋め込み用APIユーザーを新しく作成した場合やキーを変更した場合は、HTMLをコピーし直して貼り替えてください。複数のAPIユーザーがある場合、アクセス許可ドメインはHTML中のキーに対応するユーザーへ設定します。

補足: 解像度を選ばずに簡易的に埋め込みたい場合は、 「メディアファイル情報」の ストリーミング にある「埋め込みHTMLをコピー」でも取得できます。

注意

  • 対象ファイルが「公開」になっていること
  • 必要に応じて「公開期限」を設定

アクセス許可ドメインのOK/NG例（正規化ルール）

  • 入力は1行に1つ。URLを入力しても保存時にドメイン名（ホスト部）へ自動変換されます。
  • ワイルドカード（*.example.com など）は不可。サブドメインは親ドメインの許可でカバーされます。

OK例

  • example.com → example.com とそのサブドメイン（www.example.com, app.example.com など）も許可
  • https://www.example.com/path → 正規化して www.example.com を登録
  • APP.EXAMPLE.COM → 大文字は小文字に正規化（app.example.com）

NG例（保存時にエラー）

  • http:// や https:// のない不正URLで、ドメイン名の抽出ができないもの
  • ドメイン形式でない文字列（空白や記号を含むなど）
  • ワイルドカード表記（*.example.com）

ヒント

  • 迷ったら「ドメイン名（ホスト名）」だけを入力してください（例: video.example.co.jp）。
  • サブドメインを個別に絞りたい場合は、親ドメインではなくサブドメインを行ごとに登録してください。

よくある失敗と対処

症状: 埋め込みページで再生が始まらない / 403 に見える

  • 原因1: アクセス許可ドメイン未設定またはドメイン不一致

    • 対処: 「API設定編集」で埋め込みページのドメイン名を登録（例: news.example.com）。
    • 注意: example.com を登録すれば www.example.com や app.example.com も許可されます。

  • 原因2: ファイルが未公開/公開期限切れ

    • 対処: 「ファイル編集」で「公開する」をON、必要に応じて公開期限を延長。

  • 原因3: Mixed Content（HTTPSの埋め込み先がHTTPの配信リソースを読み込んでいる）

    • 対処: 埋め込み先と配信元をHTTPSに統一。

  • 原因4: CORS/ブラウザ制限（iOSの自動再生など）

    • 対処: ブラウザコンソールでエラーを確認。自動再生はミュート必須などの要件を検討。

  • 原因5: キャッシュ/古いHTML

    • 対処: ブラウザのキャッシュクリア、ページのハードリロード、CDNがあればパージ。

  • 原因6: readonlyキーを使ったJWT取得が api_key_query_auth_disabled で拒否される

    • 対処: 埋め込みにはembeddedキーを使用する。同じキーを一般APIでも使っている場合は、別の埋め込み用APIユーザーを作成してHTMLを貼り替える。

  • 原因7: APIキーを直接再生URLへ渡し、embedded_key_token_only で拒否される

    • 対処: 管理画面から現行プレイヤーの埋め込みHTMLをコピーし直す。embeddedキーはJWT取得にのみ使い、再生にはJWTを渡す。

  • 原因8: 種類変更前のJWTや期限切れJWTが残っている

    • 対処: ページを再読み込みして再生JWTを取得し直す。embeddedのJWTはリフレッシュや期限延長ができない。

デバッグのコツ

  • ブラウザの開発者ツール（Console/Network）でエラーを確認。
  • 直接再生用URL（または期限付きURL）で動作するかを切り分け。
  • 403/401 等のレスポンスが出る場合は、公開状態とアクセス許可ドメインを再確認。

次にやること / 関連