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

[アーティクル]
09/03/2024

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

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

Name	定義	説明
`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`	既定で選択されるタブ	既定でレンダリングされる [分析情報] タブを制御します。例: `tab=timeline` の場合、選択した [タイムライン] タブで分析情報がレンダリングされます。
`search`	String	最初の検索語句をコントロールできます。例: `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`。
`language`/`locale`	言語コード	プレーヤーの言語を制御します。既定値は `en-US` です。例: `language=de-DE`。
`location`		埋め込みリンクには、`location` パラメーターを含める必要があります。リージョンの名前を取得する方法に関するページを参照してください。ご利用のアカウントがプレビューである場合は、location の値に `trial` を使用する必要があります。 `trial` は、`location` パラメーターの既定値です。
`boundingBoxes`	境界ボックスの配列。オプション: 人物 (顔)、観察対象人物、検出された物体。値はコンマ (",") で区切る必要があります。	プレーヤーを埋め込むときに境界ボックスをオン/オフに設定するオプションを制御します。指定されたすべてのオプションがオンになります。例: `boundingBoxes=observedPeople,people,detectedObjects` 既定値は `boundingBoxes=observedPeople,detectedObjects` (観察対象人物と検出された物体の境界ボックスのみがオンになります)。

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

名前	定義	説明
`accessToken`^*	String	ウィジェットの埋め込みに使用されているアカウント内にのみ存在するビデオへのアクセスが提供されます。エディターウィジェットには `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 サイトにサインインします。
作業するビデオを選択し、[再生] を押します。
目的のウィジェットの種類 (分析情報、プレーヤー、またはエディター) を選択します。
</>[埋め込み] をクリックします。
埋め込みコードをコピーします ( に表示されます。埋め込みコード を、共有 & 埋め込み ダイアログにコピーします)。
コードをお使いのアプリに追加します。

Note

プレーヤー ウィジェットまたは分析情報ウィジェットのリンクを共有すると、アクセストークンが追加され、読み取り専用アクセス許可がアカウントに付与されます。

URL をアセンブルする

パブリックビデオ

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

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

プライベートビデオ

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

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

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

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

ウィジェットの対話

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

フローの概要

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

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

クロスオリジン通信

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

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

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

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

このセクションでは、2 つの Azure AI Video Indexer ウィジェット間の対話を実現して、ユーザーがアプリで分析情報コントロールを選択したときにプレーヤーが関連する場面にジャンプできるようにする方法を示します。

プレーヤーウィジェットの埋め込みコードをコピーします。
Insights 埋め込みコードをコピーします。
2 つのウィジェット間の通信を処理するメディエーターファイルを追加します。
<script src="https://breakdown.blob.core.windows.net/public/vb.widgets.mediator.js"></script>

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

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

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

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

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

<video id="vid1" width="640" height="360" controls autoplay preload>
   <source src="//breakdown.blob.core.windows.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 デモを参照してください。

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

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

指定できる値の一覧はこちらです。

たとえば、people および keywords の分析情報のみを含むウィジェットを埋め込む場合、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 ウィジェット

プレーヤー ウィジェット

エディター ウィジェット

ビデオの埋め込み

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

URL をアセンブルする

パブリック ビデオ

プライベート ビデオ

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

ウィジェットの対話

フローの概要

クロスオリジン通信

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

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

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

Insights ウィジェット

プレーヤー ウィジェット

自動再生

コード サンプル

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

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

関連するコンテンツ

フィードバック

その他のリソース

プレーヤーウィジェット

エディターウィジェット

パブリックビデオ

プライベートビデオ

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

プレーヤーウィジェット

コードサンプル