在应用中嵌入 Azure AI 视频索引器小组件

项目
10/09/2024

本文介绍如何在应用中嵌入 Azure AI 视频索引器小组件。 Azure AI 视频索引器支持将三种类型的小组件嵌入应用：见解、 播放器和 编辑器。

见解小组件包括从视频索引过程中提取的所有视觉见解。 Insights 小组件支持以下可选 URL 参数：

名称	定义	说明
`widgets`	用逗号分隔的字符串	用于控制要呈现的见解。示例：`https://www.videoindexer.ai/embed/insights/<accountId>/<videoId>/?widgets=people,keywords` 仅呈现人员和关键字 UI 见解。可用选项：、、、、`sentimentsemotionskeyframeslabelsocrscenestranscriptaudioEffectsspeakerstopics`、`observedPeoplespokenLanguage`.。 `detectedObjectsnamedEntitieskeywordspeople`
`controls`	用逗号分隔的字符串	用于控制要呈现的控件。示例：`https://www.videoindexer.ai/embed/insights/<accountId>/<videoId>/?controls=search,download` 仅呈现搜索选项和“下载”按钮。可用选项：`search`、、`presetsdownload`、`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`、`emotionssentiments`、`keyframes`、和 `namedEntities` `scenesspokenLanguage`。属性： `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` 参数必须包含在嵌入的链接中，请参阅如何获取区域名称。如果你的帐户为预览版，则位置值必须使用 `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` 参数必须包含在嵌入的链接中，请参阅如何获取区域名称。如果你的帐户为预览版，则位置值必须使用 `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` 参数必须包含在嵌入的链接中，请参阅如何获取区域名称。如果你的帐户为预览版，则位置值必须使用 `trial`。 `trial` 为参数 `location` 的默认值。

^*所有者应小心提供 accessToken。

嵌入视频

本部分介绍如何使用网站或者通过手动汇编 URL 将视频嵌入应用中。

location 参数必须包含在嵌入的链接中，请参阅如何获取区域名称。如果你的帐户为预览版，则位置值必须使用 trial。 trial 为参数 location 的默认值。例如：https://www.videoindexer.ai/accounts/00000000-0000-0000-0000-000000000000/videos/b2b2c74b8e/?location=trial。

网站体验

若要嵌入视频，请按如下所述使用网站：

登录到 Azure AI 视频索引器网站。
选择要使用的视频，并按“播放”。
选择所需的小组件类型（见解、 播放器或 编辑器）。
单击“</> 嵌入”。
复制嵌入代码（出现在“共享和嵌入”对话框的“复制嵌入的代码”中）。
将代码添加到应用。

注意

共享“播放器”或“见解”小组件的链接将包含访问令牌并向帐户授予只读权限。

手动汇编 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 的情况下使用获取视频访问令牌。

小组件交互

Insights 小组件可以与应用上的视频进行交互。本部分说明如何实现此交互。

流概述

编辑脚本时，将发生以下流：

可以在时间线中编辑脚本。
Azure AI 视频索引器获取这些更新，并将其保存在语言模型中的脚本编辑中。
更新字幕：
- 如果使用 Azure AI 视频索引器的播放器小组件 -- 它会自动更新。
- 如果使用外部播放器 - 可使用“获取视频字幕”调用获得新字幕文件。

跨域通信

若要让 Azure AI 视频索引器小组件与其他组件通信：

使用跨域通信 HTML5 方法 postMessage。
跨 VideoIndexer.ai 域验证消息。

如果实现自己的玩家代码并与 Insights 小组件集成，则需负责验证来自 VideoIndexer.ai 的消息来源。

在应用或博客中嵌入小组件（建议）

本部分介绍如何在两个 Azure AI 视频索引器小组件之间实现交互，以便在用户选择应用上的见解控件时，玩家将跳转到相关时刻。

复制播放器小组件嵌入代码。
复制 Insights 嵌入代码。
添加转存进程文件，以便处理两个小组件之间的通信：
<script src="https://breakdown.blob.core.windows.net/public/vb.widgets.mediator.js"></script>

现在，当某个用户选择应用中的见解控件时，播放器就会跳到相关的时刻。

有关详细信息，请参阅 Azure AI 视频索引器 - 嵌入这两个小组件演示。

如果使用视频索引器播放器以外的视频播放器，则必须手动操作视频播放器才能实现通信。

插入视频播放器。

例如，标准 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>

有关详细信息，请参阅视频索引器播放器 + VI Insights 演示。

自定义可嵌入式小组件

你可以选择所需的见解类型。为此，请将它们指定为以下 URL 参数的值，该参数添加到你从 API 或 Azure AI 视频索引器网站获取的嵌入代码中： &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 视频索引器播放器，可以通过指定 iframe 的大小来选择播放器的大小。

例如：

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

默认情况下，Azure AI 视频索引器播放器自动生成的隐藏式字幕，这些字幕基于视频的脚本。此脚本是从视频中提取的，其中包含上传视频时选择的源语言。

如果要嵌入其他语言，可以在嵌入播放器 URL 中添加 &captions=<Language Code>。如果需要默认显示字幕，则可以传递 &showCaptions=true。

然后，嵌入 URL 将如下所示：

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

自动播放

播放器会按照默认设置开始播放视频。你可以通过将 &autoplay=false 传递到上述嵌入 URL，选择不按默认设置播放。

代码示例

请参阅代码示例存储库，其中包含 Azure AI 视频索引器 API 和小组件的示例：

文件/文件夹	说明
`control-vi-embedded-player`	嵌入 VI Player 并从外部控制它。
`custom-index-location`	嵌入来自自定义外部位置的 VI Insights（可以是自定义 blob）。
`embed-both-insights`	VI Insights 的基本用法包括播放器和见解。
`customize-the-widgets`	将 VI 小组件嵌入自定义选项。
`embed-both-widgets`	嵌入 VI Player 和 Insights，并在它们之间进行通信。
`url-generator`	根据用户指定的选项生成小组件自定义嵌入 URL。
`html5-player`	在默认 HTML5 视频播放器中嵌入 VI Insights。

支持的浏览器

有关详细信息，请参阅支持的浏览器。

使用 npmjs 包在应用中嵌入和自定义 Azure AI 视频索引器小组件

使用我们的 @azure/video-analyzer-for-media-widgets 包，可以将见解小组件添加到应用，并根据需求对其进行自定义。

使用这个新包，你可以轻松地在我们的小部件之间进行嵌入和通信，而不必通过添加 iframe 元素来嵌入见解小部件。自定义小组件仅在此包中受支持 - 所有操作都可以在一个位置集中执行。

有关详细信息，请查看官方的 GitHub。

此外，请查看 Azure AI 视频索引器 CodePen。

通过

在应用中嵌入 Azure AI 视频索引器小组件

小组件类型

见解小组件

播放器小组件

编辑器小组件

嵌入视频

网站体验

手动汇编 URL

公用视频

私用视频

提供编辑见解功能

小组件交互

流概述

跨域通信

在应用或博客中嵌入小组件（建议）

嵌入 Azure AI 视频索引器见解小组件并使用其他视频播放器

自定义可嵌入式小组件

见解小组件

播放器小组件

自动播放

代码示例

支持的浏览器

使用 npmjs 包在应用中嵌入和自定义 Azure AI 视频索引器小组件

反馈

其他资源

通过

在应用中嵌入 Azure AI 视频索引器小组件

小组件类型

见解小组件

播放器小组件

编辑器小组件

嵌入视频

网站体验

手动汇编 URL

公用视频

私用视频

提供编辑见解功能

小组件交互

流概述

跨域通信

在应用或博客中嵌入小组件（建议）

嵌入 Azure AI 视频索引器见解小组件并使用其他视频播放器

自定义可嵌入式小组件

见解小组件

播放器小组件

自动播放

代码示例

支持的浏览器

使用 npmjs 包在应用中嵌入和自定义 Azure AI 视频索引器小组件

相关内容

反馈

其他资源