お使いのアプリに Azure AI Video Indexer ウィジェットを埋め込む

2025-05-30

この記事では、お使いのアプリに Azure AI Video Indexer ウィジェットを埋め込む方法について説明します。 Azure AI Video Indexer では、 Insights、 Player、Editor という 3 種類のウィジェットをアプリに埋め込む機能がサポートされています。

Insights ウィジェットには、ビデオのインデックス作成プロセスから抽出されたすべての視覚的な分析情報が含まれます。 Insights ウィジェットでは、次の省略可能な URL パラメーターがサポートされています。

名前	定義	説明
`widgets`	コンマで区切られた文字列	レンダリングする分析情報を制御できます。例: `https://www.videoindexer.ai/embed/insights/<accountId>/<videoId>/?widgets=people,keywords` の場合、people と keywords の UI 分析情報のみがレンダリングされます。使用可能なオプション: `people`、`keywords`、`audioEffects`、`labels`、`sentiments`、`emotions`、`topics`、`keyframes`、`transcript`、`ocr`、`speakers`、`scenes`、`spokenLanguage`、`observedPeople`、`namedEntities`、`detectedObjects`。
`controls`	コンマで区切られた文字列	レンダリングするコントロールを制御できます。例: `https://www.videoindexer.ai/embed/insights/<accountId>/<videoId>/?controls=search,download` は、検索オプションとダウンロードボタンのみをレンダリングします。使用可能なオプション: `search`、`download`、`presets`、`language`
`language`	省略形の言語コード（言語名）	分析情報言語を制御します。例: `https://www.videoindexer.ai/embed/insights/<accountId>/<videoId>/?language=es-es` または `https://www.videoindexer.ai/embed/insights/<accountId>/<videoId>/?language=spanish`
`locale`	省略形の言語コード	UI の言語を制御します。既定値は `en` です。例: `locale=de`。
`tab`	既定で選択されるタブ	既定で表示される [Insights ] タブを制御します。例: `tab=timeline` は、[ タイムライン ] タブが選択された状態で分析情報を表示します。
`search`	糸	最初の検索語句をコントロールできます。例: `https://www.videoindexer.ai/embed/insights/<accountId>/<videoId>/?search=azure`は、Azure という単語でフィルター処理された分析情報をレンダリングします。
`sort`	コンマで区切られた文字列	分析情報の並べ替えを制御できます。各並べ替えは、ウィジェット名、プロパティ、順序の 3 つの値で構成され、それらが "_" で接続されています (`sort=name_property_order`) 使用できるオプションはウィジェット:`keywords`、`audioEffects`、`labels`、`sentiments`、`emotions`、`keyframes`、`scenes`、`namedEntities`、および `spokenLanguage`。プロパティ: `startTime`、`endTime`、`seenDuration`、`name`、`ID`。順序: asc、desc。例: `https://www.videoindexer.ai/embed/insights/<accountId>/<videoId>/?sort=labels_id_asc,keywords_name_desc` では、ID の昇順に並べ替えられたラベルと、名前の降順に並べ替えられたキーワードがレンダリングされます。
`location`		`location` パラメーターは埋め込みリンクに含める必要があります。リージョンの名前を取得する方法を参照してください。ご利用のアカウントがプレビューである場合は、location の値に `trial` を使用する必要があります。 `trial` は、`location` パラメーターの既定値です。

プレーヤーウィジェットは、アダプティブビットレートを使ってビデオをストリーム配信するために使用できます。プレーヤーウィジェットでは、次の省略可能な URL パラメーターがサポートされています。

名前	定義	説明
`t`	開始からの秒数	プレーヤーで、指定した時点から再生を開始します。例: `t=60`。
`captions`	言語コードと言語コード配列	[キャプション] メニューで使用できるように、ウィジェットの読み込み中に指定された言語でキャプションをフェッチします。例: `captions=en-US`、`captions=en-US,es-ES`
`showCaptions`	ブール値	キャプションを有効にした状態でプレーヤーを再生します。例: `showCaptions=true`。
`type`		オーディオプレーヤーのスキンをアクティブにします (ビデオ部分は削除されます)。例: `type=audio`。
`autoplay`	ブール値	プレーヤーがビデオの読み込み時に、その再生を開始する必要があるかどうかを示します。既定値は `true` です。例: `autoplay=false`。自動再生を使用する機能は、使用されている Web ブラウザーのポリシーの対象となります: Firefox、 Google Chrome、 macOS WebKit
`language`/`locale`	言語コード	プレーヤーの言語を制御します。既定値は `en-US` です。例: `language=de-DE`。
`location`		`location` パラメーターは埋め込みリンクに含める必要があります。リージョンの名前を取得する方法を参照してください。ご利用のアカウントがプレビューである場合は、location の値に `trial` を使用する必要があります。 `trial` は、`location` パラメーターの既定値です。
`boundingBoxes`	境界ボックスの配列。オプション: 人物 (顔)、観察対象人物、検出された物体。値はコンマ (,) で区切ります。	プレーヤーを埋め込むときに境界ボックスをオン/オフに設定するオプションを制御します。記載されているすべてのオプションがオンになります。例: `boundingBoxes=observedPeople,people,detectedObjects` 既定値は `boundingBoxes=observedPeople,detectedObjects` (観察対象人物と検出された物体の境界ボックスのみがオンになります)。

エディターウィジェットは、新しいプロジェクトの作成とビデオの分析情報の管理に使用できます。エディターウィジェットでは、次の省略可能な URL パラメーターがサポートされています。

名前	定義	説明
`accessToken`^*	糸	ウィジェットの埋め込みに使用されているアカウント内にのみ存在するビデオへのアクセスが提供されます。エディターウィジェットには `accessToken` パラメーターが必要です。
`language`	言語コード	プレーヤーの言語を制御します。既定値は `en-US` です。例: `language=de-DE`。
`locale`	省略形の言語コード	分析情報言語を制御します。既定値は `en` です。例: `language=de`。
`location`		`location` パラメーターは、埋め込みリンクに含まれている必要があります。リージョンの名前を取得する方法を確認します。ご利用のアカウントがプレビューである場合は、location の値に `trial` を使用する必要があります。 `trial` は、`location` パラメーターの既定値です。

^*所有者は、注意して accessToken を提供する必要があります。

ビデオの埋め込み

このセクションでは、 Web サイトを使用するか、 URL を手動でアプリに組み込んでビデオを埋め込む方法について説明します。

location パラメーターは、埋め込みリンクに含まれている必要があります。リージョンの名前を取得する方法を確認します。ご利用のアカウントがプレビューである場合は、location の値に trial を使用する必要があります。 trial は、location パラメーターの既定値です。 (例: https://www.videoindexer.ai/accounts/00000000-0000-0000-0000-000000000000/videos/b2b2c74b8e/?location=trial)。

Web サイトのエクスペリエンス

ビデオを埋め込むには、次の手順で Web サイトを使用します。

Azure AI Video Indexer Web サイトにサインインします。
操作するビデオを選択し、[ 再生] を押します。
目的のウィジェットの種類 (Insights、 Player、またはエディター) を選択 します。
[ </> 埋め込み] を選択します。
埋め込みコードをコピーします ([共有と埋め込み] ダイアログの埋め込みコードのコピーに表示されます)。
コードをお使いのアプリに追加します。

注

Player または Insights ウィジェットのリンクを共有すると、アクセストークンが含まれており、アカウントに読み取り専用のアクセス許可が付与されます。

URL を手動で組み立てる

パブリックビデオ

パブリックビデオを埋め込むには、次のように URL をアセンブルします。

https://www.videoindexer.ai/embed/[insights | player]/<accountId>/<videoId>

プライベートビデオ

プライベートビデオを埋め込むには、iframe の属性にアクセストークンを渡す必要があります (src を使用)。

https://www.videoindexer.ai/embed/[insights | player]/<accountId>/<videoId>/?accessToken=<accessToken>

分析情報の編集機能を提供する

埋め込みのウィジェットで分析情報の編集機能を提供するには、編集アクセス許可を含むアクセストークンを渡す必要があります。で &allowEdit=true API 要求を使用します。

ウィジェットの対話

Insights ウィジェットは、アプリ上のビデオと対話できます。このセクションでは、この対話を実現する方法を示します。

フローの概要

トランスクリプトを編集する場合、次のフローが発生します。

タイムラインでトランスクリプトを編集します。
Azure AI Video Indexer でこれらの更新が取得され、トランスクリプトの編集からの内容として言語モデルに保存されます。
キャプションは更新されます。
- Azure AI Video Indexer のプレーヤーウィジェットを使用している場合は、自動的に更新されます。
- 外部プレーヤーを使用している場合は、ビデオキャプションの取得 API 呼び出しから新しいキャプションファイルユーザー を取得 します。

クロスオリジン通信

Azure AI Video Indexer ウィジェットが他のコンポーネントと通信できるようにするには:

クロスオリジン通信の HTML5 メソッド postMessage を使用します。
VideoIndexer.ai からのメッセージの発生元を検証します。

独自のプレイヤーコードを実装し、Insights ウィジェットと統合する場合は、VideoIndexer.ai からのメッセージの配信元を検証する必要があります。

ウィジェットをお使いのアプリまたはブログに埋め込む (推奨)

このセクションでは、2 つの Azure AI Video Indexer ウィジェット間の相互作用を実現する方法について説明します。ユーザーがアプリで分析情報コントロールを選択すると、プレイヤーは関連する瞬間にジャンプします。

プレーヤーウィジェットの埋め込みコードをコピーします。
Insights 埋め込みコードをコピーします。
2 つのウィジェット間の通信を処理する Mediator ファイルを追加します。
<script src="https://aka.ms/vi-mediator-file"></script>

これで、ユーザーがアプリで分析情報コントロールを選択すると、プレーヤーが関連する場面にジャンプします。

詳細については、 Azure AI Video Indexer - 両方のウィジェットを埋め込むデモを参照してください。

Video Indexer Player 以外のビデオプレーヤーを使用する場合は、ビデオプレーヤーを手動で操作して通信を実現する必要があります。

ビデオプレーヤーを挿入します。

たとえば、標準の HTML5 プレーヤーです。

<video id="vid1" width="640" height="360" controls autoplay preload>
   <source src="//vi-static-prod-gdh6d4ggexcmgua5.b01.azurefd.net/public/Microsoft%20HoloLens-%20RoboRaid.mp4" type="video/mp4" /> 
   Your browser does not support the video tag.
</video>

Insights ウィジェットを埋め込みます。

"メッセージ" イベントをリッスンして、プレーヤー用の通信を実装します。次に例を示します。

<script>

    (function(){
    // Reference your player instance.
    var playerInstance = document.getElementById('vid1');

    function jumpTo(evt) {
      var origin = evt.origin || evt.originalEvent.origin;

      // Validate that the event comes from the videoindexer domain.
      if ((origin === "https://www.videoindexer.ai") && evt.data.time !== undefined){

        // Call your player's "jumpTo" implementation.
        playerInstance.currentTime = evt.data.time;

        // Confirm the arrival to us.
        if ('postMessage' in window) {
          evt.source.postMessage({confirm: true, time: evt.data.time}, origin);
        }
      }
    }

    // Listen to the message event.
    window.addEventListener("message", jumpTo, false);

    }())    

</script>

詳細については、 Video Indexer Player + VI Insights デモを参照してください。

埋め込み可能なウィジェットのカスタマイズ

必要な分析情報の種類を選択できます。これを行うには、次の URL パラメーターの値として指定します。これは、取得した埋め込みコード ( API または Azure AI Video Indexer Web サイトから): &widgets=<list of wanted widgets>に追加されます。

使用可能な値を次に示します。

たとえば、ユーザーとキーワードの分析情報のみを含むウィジェットを埋め込む場合、iframe 埋め込み URL は次のようになります。

https://www.videoindexer.ai/embed/insights/<accountId>/<videoId>/?widgets=people,keywords

iframe ウィンドウのタイトルも、iframe の URL に &title=<YourTitle> を指定することでカスタマイズできます (これにより、HTML <title> 値がカスタマイズされます)。

たとえば、iframe ウィンドウにタイトル MyInsightsを指定する場合、URL は次のようになります。

https://www.videoindexer.ai/embed/insights/<accountId>/<videoId>/?title=MyInsights

このオプションは、新しいウィンドウで分析情報を開く必要がある場合にのみ該当することに注意してください。

Azure AI Video Indexer プレーヤーを埋め込む場合は、iframe のサイズを指定して、プレーヤーのサイズを選択できます。

次に例を示します。

> [!VIDEO https://www.videoindexer.ai/embed/player/<accountId>/<videoId>/]>/<videoId>/" frameborder="0" allowfullscreen />

既定では、Azure AI Video Indexer プレーヤーは、ビデオのトランスクリプトに基づいてクローズドキャプションを自動生成します。トランスクリプトは、ビデオがアップロードされた時に選択されたソース言語でビデオから抽出されます。

別の言語で埋め込む場合は、&captions=<Language Code> を埋め込みプレーヤーの URL に追加します。既定でキャプションが表示されるようにする場合は、& showCaptions=true を渡します。

埋め込み URL は次のようになります。

https://www.videoindexer.ai/embed/player/<accountId>/<videoId>/?captions=en-us

自動再生

既定では、プレーヤーはビデオの再生を開始します。上記の埋め込み URL に &autoplay=false を渡さない方法を選択できます。

コードサンプル

Azure AI Video Indexer API とウィジェットのサンプルを含むコードサンプルリポジトリを参照してください。

ファイル/フォルダー	説明
`control-vi-embedded-player`	VI プレーヤーを埋め込んで、外部から制御します。
`custom-index-location`	カスタムの外部の場所 (お客様の BLOB を指定できます) から VI 分析情報を埋め込みます。
`embed-both-insights`	プレーヤーと分析情報の両方での VI 分析情報の基本的な使用方法。
`customize-the-widgets`	カスタマイズされたオプションを使用して VI ウィジェットを埋め込みます。
`embed-both-widgets`	VI プレーヤーと分析情報を埋め込んで、両者間の通信を行います。
`url-generator`	ユーザー指定のオプションに基づいて、ウィジェットのカスタム埋め込み URL を生成します。
`html5-player`	既定の HTML5 ビデオプレーヤーを使用して VI 分析情報を埋め込みます。

サポートされているブラウザー

詳細については、サポートされているブラウザーを参照してください。

npmjs パッケージを使用してアプリで Azure AI Video Indexer のウィジェットを埋め込んでカスタマイズする

@azure/video-analyzer-for-media-widgets パッケージを使用すると、分析情報ウィジェットをアプリに追加し、ニーズに応じてカスタマイズできます。

分析情報ウィジェットを埋め込む iframe 要素を追加する代わりに、この新しいパッケージを使用すると、ウィジェット間で簡単に埋め込んで通信できます。ウィジェットのカスタマイズは、このパッケージでのみサポートされます。すべてを 1 か所で行うことができます。

詳細については、 GitHub の公式サイトを参照してください。

また、 Azure AI Video Indexer CodePen も確認してください。

次の方法で共有

お使いのアプリに Azure AI Video Indexer ウィジェットを埋め込む

ウィジェットの種類

Insights ウィジェット

プレーヤー ウィジェット

エディター ウィジェット

ビデオの埋め込み

Web サイトのエクスペリエンス

URL を手動で組み立てる

パブリック ビデオ

プライベート ビデオ

分析情報の編集機能を提供する

ウィジェットの対話

フローの概要

クロスオリジン通信

ウィジェットをお使いのアプリまたはブログに埋め込む (推奨)

Azure AI Video Indexer Insights ウィジェットを埋め込み、別のビデオ プレーヤーを使用する

埋め込み可能なウィジェットのカスタマイズ

Insights ウィジェット

プレーヤー ウィジェット

自動再生

コード サンプル

サポートされているブラウザー

npmjs パッケージを使用してアプリで Azure AI Video Indexer のウィジェットを埋め込んでカスタマイズする

関連するコンテンツ

フィードバック

その他のリソース

プレーヤーウィジェット

エディターウィジェット

パブリックビデオ

プライベートビデオ

Azure AI Video Indexer Insights ウィジェットを埋め込み、別のビデオプレーヤーを使用する

プレーヤーウィジェット

コードサンプル