# @azure/video-indexer-widgets 中文文档

规范地址：https://npmcn.com/package/%40azure/video-indexer-widgets/

版本：1\.0\.5
npm 元数据更新时间：2026-03-19T19:53:38.175Z
中文译文更新时间：2026-11-07T15:58:45.710Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40azure/video-indexer-widgets
原文对照：https://npmcn.com/package/%40azure/video-indexer-widgets/?lang=original
项目主页：https://www.videoindexer.ai/
源码仓库：https://github.com/Azure-Samples/media-services-video-indexer

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：182 kB，32 个文件
- 模块格式：CommonJS
- TypeScript 类型：包内自带
- 运行依赖：0 个
- 首次发布：2022-04-26T10:52:06.966Z
- 最新版本发布：2024-02-28T12:29:36.647Z
- 近 30 天下载量：5987（2026-10-08 至 2026-11-06，npm 官方下载统计）
- 已发布版本数：2（近 12 个月 0 个）

## 中文简介

由Video Indexer制作的软件包,目的是在客户服务中嵌入Video Indexer的透视元件并自定义其风格和数据.

## 安装

```sh
npm install @azure/video-indexer-widgets
```

也可以使用：`pnpm add @azure/video-indexer-widgets`、`yarn add @azure/video-indexer-widgets`、`bun add @azure/video-indexer-widgets`

## README

# 视频索引器部件

[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT) [![TypeScript](https://img.shields.io/badge/%3C%2F%3E-TypeScript-%230074c1.svg)](https://www.typescriptlang.org/) [![code style: prettier](https://img.shields.io/badge/code_style-prettier-f8bc45.svg)](https://github.com/prettier/prettier)

![vi\_widgets\_banner\_github.png](https://user-images.githubusercontent.com/51399662/135491488-10ec3d7a-e573-4ddf-898a-337412a63150.gif)

此 repo 包含 Video Indexer 部件包 。 下面可以找到有关如何使用这些棋子的文件和示例.

## 导言

[Azure AI 视频索引器](https://aka.ms/vi-about-doc) azure AI服务(例如:面相、翻译、Azure AI Vision和发言)。 它使你能够利用Azure AI Video Indexer视频和音频模型从你的视频中提取洞察力.

本寄存器中的材料旨在帮助将视频索引器部件嵌入到您自己的服务中,并自定义其风格和数据.

软件包支持两类透视部件:

-   标准视频索引器部件
-   可定制的透视部件 - 允许您充分灵活和定制以满足您的业务需要 .

下面你可以看到关于:

-   [安装视频索引器部件包](https://npmcn.com/package/%40azure/video-indexer-widgets/#readme-installing-the-video-indexer-widgets-package)
-   [嵌入标准视频索引器透视元件](https://npmcn.com/package/%40azure/video-indexer-widgets/#readme-embed-standard-video-indexer-insights-widget)
-   [嵌入自定义的视频索引器](https://npmcn.com/package/%40azure/video-indexer-widgets/#readme-embed-video-indexer-customizable-insights-widget)
-   [启用自定义样式以满足您的应用程序外观和感觉](https://npmcn.com/package/%40azure/video-indexer-widgets/#readme-enable-custom-styling-to-meet-your-application-look-and-feel)

我们的样本和执行细节也存在于我们 [官员 GitHub](https://github.com/Azure-Samples/media-services-video-indexer/tree/master/Embedding%20widgets/widget-customization)。 。 。 .

## 安装视频索引器部件包

这些部件作为国家防范机制的一揽子文件分发。 安装库有几种方法:

-   **利用国家预防机制安装** - 为了直接消耗国家防范机制软件包,你可以使用npm命令安装.
    
    ```
    npm install @azure/video-indexer-widgets
    ```
    
-   **使用 CDN 导入** - 您可以使用以下剪接器直接将最新版本的部件导入到您的 HTML 文件 -
    
    ```html
            ...
            <script type="module" src="https://unpkg.com/@azure/video-indexer-widgets"></script>
        </body>
    </html>
    ```
    
-   如果您想要在窗口上曝光部件代码, 您可以使用以下片段导入最新版本 -
    
    ```html
            ...
            <script src="https://unpkg.com/@azure/video-indexer-widgets@latest/dist/global.min.js"></script>
        </body>
    </html>
    ```
    

  

## 嵌入标准视频索引器透视元件

这个软件包没有添加一个iframe元素来嵌入透视元件,而是允许您使用JS代码嵌入. 具体内容如下:

-   如何在您的应用程序中添加透视部件
-   显示部件使用情况的样本

### 创建透视组件

透视部件在运行时创建 。 部件将根据您提供的容器创建 .

使用软件包运行时创建 :

```typescript
   const widget = new window.vi.widgets.Insights(
       '<container-id>',
       <widget-option-object>,
       <widget-configuration>
   );
```

请审查一下我们 [官员 GitHub](https://github.com/Azure-Samples/media-services-video-indexer/tree/master/Embedding%20widgets/widget-customization#creating-the-insights-widget) 查找更多关于所涉界面和课程的信息.

### 代码样本

此代码显示在 Javascript 代码运行时如何创建部件 .

```html
<script>
    function onPackageLoad() {
        // Create widget config
        const config = {
            accountId: '<ACCOUNT-ID>',
            videoId: '<VIDEO-ID>',
            accessToken: '' // Add access token only if your video is private
        };
        let widget = new window.vi.widgets.Insights(
            'widget-container',
            {
                height: 780,
                width: 580
            },
            config
        );

        widget.render();
    }
</script>
<script src="https://unpkg.com/@azure/video-indexer-widgets@latest/dist/global.min.js" onload="onPackageLoad()"></script>
<body>
    <div id="widget-container"></div>
</body>
```

#### 字体示例 - 说吧

在下面的例子中,我们创建了一个有洞察力的部件,与西班牙本地化. 所选的分页是时间线,所选的组件是情感,情感,笔录和关键词. 最初的搜索参数是"你好".

```typescript
    import {
        IInsightsWidgetConfig,
        InsightsWidget
    } from '@azure/video-indexer-widgets';

    const config: IInsightsWidgetConfig = {
        accountId: '<ACCOUNT-ID>',
        videoId: '<VIDEO-ID>',
        accessToken: '<ACCESS-TOKEN>',
        locale: 'es-es',
        tab: 'timeline',
        search: 'hello',
        components: ['emotions', 'sentiments', 'transcript', 'keywords']
    };

    const insightsWidget = new InsightsWidget(
        'container',
        {
            height: 780,
            width: 580
        },
        config
    );

    insightsWidget.render();
```

## 嵌入自定义的视频索引器

嵌入 Video Indexer 有嵌入式视频原始数据的透视元件,结合了您自己的自定义数据和原始 Video Indexer 数据. 下节列出一些细节:

-   如何在您的应用程序中添加自定义透视部件
-   显示部件使用情况的样本

  

### 创建自定义透视部件

自定义透视部件在运行时创建 .

使用软件包运行时创建 :

```typescript
   const widget = new window.vi.widgets.CustomInsights(
       '<container-id>',
       <widget-option>,
       <widget-configuration>
   );
```

请审查一下我们 [官员 GitHub](https://github.com/Azure-Samples/media-services-video-indexer/tree/master/Embedding%20widgets/widget-customization#creating-the-custom-insight-widget) 查找更多关于所涉界面和课程的信息.

### 代码样本数字 :

此代码显示如何在运行时使用 JavaScript 代码创建通用自定义透视部件 :

```html
<script>
    function onPackageLoad() {
        // Create widget config
        const config = {
            duration: <duration>, 
            accountId: '<VI-ACCOUNT-ID>',
            videoId: '<VI-VIDEO-ID>',
            viInsightsKeys: <insights-key-list-array>,
            rawInsightsData: <raw-insights-data-array>,
            customData: <custom-data-array>
        };
        let widget = new window.vi.widgets.CustomInsights(
            'widget-container',
            {
                height: 780,
                width: 580
            },
            config
        );

        widget.render();
    }
</script>
<script src="https://unpkg.com/@azure/video-indexer-widgets@latest/dist/global.min.js" onload="onPackageLoad()"></script>
<body>
    <div id="widget-container"></div>
</body>
```

#### 字体示例数字 :

此代码显示如何在运行时创建自定义的透视部件 .

在下面的例子中, 我们在运行时使用部件支持的所有数据类型创建自定义的透视部件 .

1.  视频持续时间为634秒
2.  该部件将显示由Video Indexer视频提供的品牌、关键词、场景和块(根据提供的账户+视频ID)。 视频是公开的,因为没有提供访问标志.
3.  该部件将有两个原始的洞察数据。 情感和话题.
4.  部件将有两个自定义的数据组件 。 一个作为胶囊,另一个颜色图.

```typescript
    import {
        ICustomInsightsWidgetConfig,
        CustomInsightsWidget,
        VIInsightsKey,
        IEmotion,
        ITopic,
        IVRawIInsightsData,
        ICustomElement,
        ICustomData,
        ICustomColorElement
    } from '@azure/video-indexer-widgets';

    /**
    *    Using data from Video Indexer video parameters
    **/
    // VI account ID
    const viAccountID = '00000000-0000-0000-0000-000000000000'
    // VI video ID
    const viVideoID = 'd9d4860279'
    // VI insights key list.
    const viInsightsKeys : VIInsightsKey[] =  ['brands', 'keywords', 'scenes', 'blocks'];


    /**
    *    Using raw Video Indexer insights parameters
    **/
   // Using raw emotions data, with two emotions - one is Joy and other is Sad.
   const emotionsList: IEmotion[] [
            {
                id: 1,
                type: 'Joy',
                instances: [
                    {
                        adjustedEnd: '0:06:46.15',
                        adjustedStart: '0:06:42.086',
                        confidence: 0.6808,
                        end: '0:06:46.15',
                        start: '0:06:42.086'
                    }
                ]
            },
            {
                id: 2,
                type: 'Sad',
                instances: [
                    {
                        adjustedEnd: '0:10:18.957',
                        adjustedStart: '0:09:59.306',
                        confidence: 0.8383,
                        end: '0:10:18.957',
                        start: '0:09:59.306'
                    }
                ]
            }
    ];

    // Using raw topics data, with 3 topics.
    const topicsList: ITopic[] = [
            {
                confidence: 0.7577,
                id: 1,
                name: 'Brand Audit',
                referenceId: 'Brand Audit',
                language: 'en-US',
                instances: [
                    {
                        adjustedEnd: '0:01:52.838',
                        adjustedStart: '0:00:13.712',
                        end: '0:01:52.838',
                        start: '0:00:13.712'
                    },
                    {
                        adjustedEnd: '0:03:16.21',
                        adjustedStart: '0:02:08.093',
                        end: '0:03:16.21',
                        start: '0:02:08.093'
                    }
                ]
            },
            {
                confidence: 0.4893,
                iabName: 'News and Politics',
                id: 23,
                instances: [
                    {
                        adjustedEnd: '0:02:59.015',
                        adjustedStart: '0:00:08.421',
                        end: '0:02:59.015',
                        start: '0:00:08.421'
                    }
                ],
                iptcName: 'Politics/election',
                language: 'en-US',
                name: 'Political Campaigns and Elections',
                referenceId: 'Politics and Government/Political Campaigns and Elections',
                referenceType: 'VideoIndexer'
            },
            {
                confidence: 0.6453,
                iabName: 'Business and Finance',
                id: 14,
                instances: [
                    {
                        adjustedEnd: '0:02:37.644',
                        adjustedStart: '0:00:00',
                        end: '0:02:37.644',
                        start: '0:00:00'
                    },
                    {
                        adjustedEnd: '0:04:01.497',
                        adjustedStart: '0:03:39.322',
                        end: '0:04:01.497',
                        start: '0:03:39.322'
                    },
                    {
                        adjustedEnd: '0:05:00.968',
                        adjustedStart: '0:04:36.6',
                        end: '0:05:00.968',
                        start: '0:04:36.6'
                    }
                ],
                iptcName: 'Economy, Business and Finance/business (general)',
                language: 'en-US',
                name: 'Brand Strategy',
                referenceId: 'Business/Product Development/Brand Strategy',
                referenceType: 'VideoIndexer'
            }
    ];

    // Raw VI insights array.
    const rawInsightsData: IVRawIInsightsData[] = [
        {
            rawInsightsKey: 'emotions',
            insightsItems: emotionsList
        },
        {
            rawInsightsKey: 'topics',
            insightsItems: topicsList
        }
    ];

    /**
    *    Using custom insights data
    **/
   // Create a custom data with UI as a capsule.

    // Create a custom element with name 'custom element 2', that has 4 instances. 
   const customElement2 : ICustomElement = {
        id: 1,
        text: 'Custom element 2',
        instances: [
          {
            adjustedEnd: '0:00:12.44',
            adjustedStart: '0:00:11.54',
            end: '0:00:12.44',
            start: '0:00:11.54'
          },
          {
            adjustedEnd: '0:05:27.96',
            adjustedStart: '0:05:19.89',
            end: '0:05:27.96',
            start: '0:05:19.89'
          },
          {
            adjustedEnd: '0:02:06.443',
            adjustedStart: '0:02:00.83',
            end: '0:02:06.443',
            start: '0:02:00.83'
          },
          {
            adjustedEnd: '0:03:45.44',
            adjustedStart: '0:03:43.21',
            end: '0:03:45.44',
            start: '0:03:43.21'
          }
        ]
      };

    // Create a custom element with name 'custom element 1', that has 3 instances. 
      const customElement1 : ICustomElement = {
        id: 1,
        text: 'Custom Element 1',
        instances: [
          {
            adjustedEnd: '0:02:37.644',
            adjustedStart: '0:00:00',
            end: '0:02:37.644',
            start: '0:00:00'
          },
          {
            adjustedEnd: '0:04:01.497',
            adjustedStart: '0:03:39.322',
            end: '0:04:01.497',
            start: '0:03:39.322'
          },
          {
            adjustedEnd: '0:05:00.968',
            adjustedStart: '0:04:36.6',
            end: '0:05:00.968',
            start: '0:04:36.6'
          }
        ]
    };

   // Create the custom data element, with title 'My data', controlled by all and captioning presets, from type capsule, with 2 elements.
   const customCapsuleData: ICustomData = {
        title: 'My Data',
        key: 'myData',
        presets: ['all', 'captioning'],
        type: 'capsule',
        items: [customElement, customElement2]
    };

    // Create custom color element, with text 'My Custom color Element!', with blue color and 3 instances.
    const customColorElement : ICustomColorElement = {
        id: 1,
        text: 'My Custom color Element!',
        color: 'blue',
        instances: [
          {
            adjustedEnd: '0:02:37.644',
            adjustedStart: '0:00:00',
            end: '0:02:37.644',
            start: '0:00:00'
          },
          {
            adjustedEnd: '0:04:01.497',
            adjustedStart: '0:03:39.322',
            end: '0:04:01.497',
            start: '0:03:39.322'
          },
          {
            adjustedEnd: '0:05:00.968',
            adjustedStart: '0:04:36.6',
            end: '0:05:00.968',
            start: '0:04:36.6'
          }
        ]
    };

    // Create custom color element, with text 'Second custom Color Element', with darkmagenta color and 1 instance.
    const customColorElement2 : ICustomColorElement = {
        id: 2,
        text: 'Second custom Color Element',
        color: 'darkmagenta',
        instances: [
          {
            adjustedEnd: '0:06:46.15',
            adjustedStart: '0:06:42.086',
            end: '0:06:46.15',
            start: '0:06:42.086'
          }
        ]
      };

    // Create custom color element, with text 'customColorElement3', with #FFFFF color and 1 instance.
    const customColorElement3 : ICustomColorElement = {
        id: 3,
        text: 'customColorElement3',
        color: '#FFFFF',
        instances: [
          {
            adjustedEnd: '0:10:18.957',
            adjustedStart: '0:09:59.306',
            confidence: 0.8383,
            end: '0:10:18.957',
            start: '0:09:59.306'
          }
        ]
      };

    // Create the custom data element, with title 'My color', controlled by all and accessibility presets, from type color-map, with 3 elements.
    // The custom data element will be sorted by the provided name, desc. 
    const customColorData : ICustomData = {
        title: 'My Color',
        key: 'myColor',
        presets: ['all', 'accessibility'],
        type: 'color-map',
        sortedBy: {
            order: 'desc',
            property: 'name'
        },
        items: [customColorElement, customColorElement2, customColorElement3]
      };

    const customDataList : ICustomData[] = [customCapsuleData, customColorData];

    const config : ICustomInsightsWidgetConfig = {
        duration: 634, // Video duration - mandatory parameter
        accountId: viAccountID, // VI account ID. Should be provided only if using data from VI.
        videoId: viVideoID,  // VI video ID. Should be provided only if using data from VI.
        viInsightsKeys: viInsightsKeys, // VI insights key list. Mandatory parameter. If you don't want to use data from VI, send an empty array.
        rawInsightsData: rawInsightsData, // raw VI insights array. Mandatory parameter. If you don't want to use raw data, send an empty array.
        customData: customDataList,  // custom data array. Mandatory parameter. If you don't want to use custom data, send an empty array.
        preset: 'all' // select preset 'All'
    };

    this.customInsightsWidget = new CustomInsightsWidget(
        'container',
        {
            width: 800,
            height: 1800
        },
        config
    );

    this.customInsightsWidget.render();
```

最后的见解是:  
![vi\_widgets\_custom\_widget.png](https://user-images.githubusercontent.com/51399662/135498863-4ae5b4ed-ba4a-462e-9805-70adbe178b6b.png)

我们能找到更多例子 [官员 GitHub](https://github.com/Azure-Samples/media-services-video-indexer/tree/master/Embedding%20widgets/widget-customization)。 。 。 .

  

## 启用自定义样式以满足您的应用程序外观和感觉

![vi\_widgets\_custom\_color.png](https://user-images.githubusercontent.com/51399662/135491477-f9d5ee1d-803b-4693-873b-0a003c3a0a13.jpg)

两个部件都支持自定义用户界面颜色. 您可以发送自己的彩色调色板,选择VI主题中的一个,或者选择默认主题并自定义部分颜色.

要执行您应当作为配置对象的一部分发送 a `style` 类型对象 `IInsightsStyle`。 。 。 .

请审查一下我们 [官员 GitHub](https://github.com/Azure-Samples/media-services-video-indexer/tree/master/Embedding%20widgets/widget-customization#enable-custom-styling-to-meet-your-application-look-and-feel) 查找更多关于所涉界面和课程的信息.

### 代码样本数字 :

下面的打字符示例创建了带有"Dark"主题的透视部件,并更改了两种颜色.

```typescript
    import {
        IInsightsWidgetConfig,
        InsightsWidget,
        IBaseStyleConfig,
        IWidgetStyle
    } from '@azure/video-indexer-widgets';

    // Change two colors of the base style config
    const insightsStyleConfig : IBaseStyleConfig = {
        primary: 'yellow',
        dividers: 'rgba(134,28,173,1)'
    };

    // Select dark mode theme and send new style
    const style: IWidgetStyle = {
        customStyle: insightsStyleConfig,
        theme: 'Dark'
    };
    const config: IVIInsightsWidgetConfig = {
        accountId: '<ACCESS-TOKEN>',
        videoId: '<VIDEO-ID>',
        accessToken: '<ACCESS-TOKEN>',
        style: style
    };

    this.insightsWidget = new InsightsWidget(
        'container',
        {
            height: 780,
            width: 580
        },
        config
    );

    this.insightsWidget.render();
```

## 商标

本项目可能包含项目,产品或服务的商标或标志. 授权使用微软 商标或标志必须遵循 [微软的商标和品牌准则](https://www.microsoft.com/en-us/legal/intellectualproperty/trademarks/usage/general)。 。 。 . 在这个项目的修改后版本中使用微软商标或标志不得造成混淆或暗示微软赞助. 任何使用第三方商标或标志的行为都必须遵守这些第三方的政策.

## 行为守则

该项目通过了 [Microsoft 开源行为守则](https://opensource.microsoft.com/codeofconduct/)。 。 。 . 更多信息见 [《行为守则》](https://opensource.microsoft.com/codeofconduct/faq/) 或者说 联系人 [打开码@ microsoft.com](mailto:opencode@microsoft.com) 并附上任何其他问题或评论.

## 常见问题

### @azure/video-indexer-widgets 是什么？

由Video Indexer制作的软件包,目的是在客户服务中嵌入Video Indexer的透视元件并自定义其风格和数据\.

### 如何安装 @azure/video-indexer-widgets？

在项目目录运行 npm install @azure/video-indexer-widgets，或使用 pnpm add / yarn add / bun add。

### @azure/video-indexer-widgets 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @azure/video-indexer-widgets 支持 ESM 还是 CommonJS？

以 CommonJS 形式发布，可以直接 require\(\)；在 ES Module 项目中也可以用 import 引入（Node\.js 会把 module\.exports 作为默认导出）。

### @azure/video-indexer-widgets 可以商用吗？

@azure/video-indexer-widgets 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @azure/video-indexer-widgets 的下载量有多少？

根据 npm 官方下载统计，@azure/video-indexer-widgets 在 2026/10/08 – 2026/11/06 这 30 天内被下载 5,987 次，日均约 200 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @azure/video-indexer-widgets 还在维护吗？

最新版本 1\.0\.5 发布于 2024/02/28（2 年前）；至今共发布 2 个版本，其中过去 12 个月发布了 0 个；首次发布于 2022/04/26。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。