在您的應用程式中內嵌影片索引子小工具Embed Video Indexer widgets in your apps

本文說明如何在您的應用程式中內嵌影片索引子小工具。This article shows how you can embed Video Indexer widgets in your apps. 影片索引器支援將三種類型的小工具內嵌到應用程式中:認知深入解析播放機以及編輯器Video Indexer supports embedding three types of widgets into your apps: Cognitive Insights, Player, and Editor.

從第2版開始,小工具基底 URL 會包含指定帳戶的區域。Starting with version 2, the widget base URL includes the region of the specified account. 例如,美國西部區域中的帳戶會產生:https://www.videoindexer.ai/embed/insights/.../?location=westus2For example, an account in the West US region generates: https://www.videoindexer.ai/embed/insights/.../?location=westus2.

小工具類型Widget types

認知深入解析小工具Cognitive Insights widget

認知深入解析小工具包含從您的影片索引編製程序中擷取的所有視覺化深入解析。A Cognitive Insights widget includes all visual insights that were extracted from your video indexing process. 認知深入解析小工具支援下列選擇性 URL 參數:The Cognitive Insights widget supports the following optional URL parameters:

名稱Name 定義Definition 描述Description
widgets 以逗號分隔的字串Strings separated by comma 可讓您控制要呈現的見解。Allows you to control the insights that you want to render.
範例: https://www.videoindexer.ai/embed/insights/<accountId>/<videoId>/?widgets=people,keywords 只呈現人員和關鍵字 UI 深入解析。Example: https://www.videoindexer.ai/embed/insights/<accountId>/<videoId>/?widgets=people,keywords renders only people and keywords UI insights.
可用的選項:人員、animatedCharacters、關鍵字、標籤、情緒、表情、主題、主要畫面格、文字記錄、ocr、喇叭、場景和 namedEntities。Available options: people, animatedCharacters ,keywords, labels, sentiments, emotions, topics, keyframes, transcript, ocr, speakers, scenes, and namedEntities.
controls 以逗號分隔的字串Strings separated by comma 可讓您控制要呈現的控制項。Allows you to control the controls that you want to render.
範例: https://www.videoindexer.ai/embed/insights/<accountId>/<videoId>/?controls=search,download 只呈現搜尋選項和下載按鈕。Example: https://www.videoindexer.ai/embed/insights/<accountId>/<videoId>/?controls=search,download renders only search option and download button.
可用選項: [搜尋]、[下載]、[預設]、[語言]。Available options: search, download, presets, language.
language 簡短的語言代碼(語言名稱)A short language code (language name) 控制 insights 語言。Controls insights language.
範例: https://www.videoindexer.ai/embed/insights/<accountId>/<videoId>/?language=es-esExample: https://www.videoindexer.ai/embed/insights/<accountId>/<videoId>/?language=es-es
https://www.videoindexer.ai/embed/insights/<accountId>/<videoId>/?language=spanishor https://www.videoindexer.ai/embed/insights/<accountId>/<videoId>/?language=spanish
locale 簡短的語言代碼A short language code 控制 UI 的語言。Controls the language of the UI. 預設值是 enThe default value is en.
範例: locale=de.Example: locale=de.
tab 預設選取的索引標籤The default selected tab 控制預設呈現的 [深入解析] 索引標籤。Controls the Insights tab that's rendered by default.
範例: tab=timeline 使用已選取的 [時間軸] 索引標籤呈現見解。Example: tab=timeline renders the insights with the Timeline tab selected.
location location參數必須包含在內嵌連結中,請參閱如何取得您的區功能變數名稱稱The location parameter must be included in the embedded links, see how to get the name of your region. 如果您的帳戶處於預覽狀態, trial 應該將用於 [位置] 值。If your account is in preview, the trial should be used for the location value. trial這是參數的預設值 locationtrial is the default value for the location parameter.

播放器小工具Player widget

您可以使用 [播放程式] 小工具,透過調適型位元速率來串流影片。You can use the Player widget to stream video by using adaptive bit rate. 播放工具 widget 支援下列選擇性 URL 參數。The Player widget supports the following optional URL parameters.

名稱Name 定義Definition 描述Description
t 開始的秒數Seconds from the start 讓玩家從指定的時間點開始播放。Makes the player start playing from the specified time point.
範例: t=60.Example: t=60.
captions 語言代碼A language code 在 widget 載入時,以指定的語言提取標題,以供 [標題] 功能表使用。Fetches the caption in the specified language during the widget loading to be available on the Captions menu.
範例: captions=en-US.Example: captions=en-US.
showCaptions 布林值A Boolean value 可讓播放器載入已啟用的標題。Makes the player load with the captions already enabled.
範例: showCaptions=true.Example: showCaptions=true.
type 啟動音訊播放機面板(影片部分已移除)。Activates an audio player skin (the video part is removed).
範例: type=audio.Example: type=audio.
autoplay 布林值A Boolean value 表示播放者是否應該在載入時開始播放影片。Indicates if the player should start playing the video when loaded. 預設值是 trueThe default value is true.
範例: autoplay=false.Example: autoplay=false.
language/locale 語言代碼A language code 控制播放機語言。Controls the player language. 預設值是 en-USThe default value is en-US.
範例: language=de-DE.Example: language=de-DE.
location location參數必須包含在內嵌連結中,請參閱如何取得您的區功能變數名稱稱The location parameter must be included in the embedded links, see how to get the name of your region. 如果您的帳戶處於預覽狀態, trial 應該將用於 [位置] 值。If your account is in preview, the trial should be used for the location value. trial這是參數的預設值 locationtrial is the default value for the location parameter.

編輯器 widgetEditor widget

您可以使用編輯器 widget 來建立新的專案,以及管理影片的深入解析。You can use the Editor widget to create new projects and manage a video's insights. 編輯器 widget 支援下列選擇性 URL 參數。The Editor widget supports the following optional URL parameters.

名稱Name 定義Definition 描述Description
accessToken* StringString 提供只在用來內嵌 widget 之帳戶中的影片存取。Provides access to videos that are only in the account that's used to embed the widget.
編輯器 widget 需要 accessToken 參數。The Editor widget requires the accessToken parameter.
language 語言代碼A language code 控制播放機語言。Controls the player language. 預設值是 en-USThe default value is en-US.
範例: language=de-DE.Example: language=de-DE.
locale 簡短的語言代碼A short language code 控制 insights 語言。Controls the insights language. 預設值是 enThe default value is en.
範例: language=de.Example: language=de.
location location參數必須包含在內嵌連結中,請參閱如何取得您的區功能變數名稱稱The location parameter must be included in the embedded links, see how to get the name of your region. 如果您的帳戶處於預覽狀態, trial 應該將用於 [位置] 值。If your account is in preview, the trial should be used for the location value. trial這是參數的預設值 locationtrial is the default value for the location parameter.

*擁有者應該 accessToken 小心提供。*The owner should provide accessToken with caution.

內嵌影片Embedding videos

本節討論如何將公開和私人內容內嵌至應用程式。This section discusses embedding the public and private content into apps.

location參數必須包含在內嵌連結中,請參閱如何取得您的區功能變數名稱稱The location parameter must be included in the embedded links, see how to get the name of your region. 如果您的帳戶處於預覽狀態, trial 應該將用於 [位置] 值。If your account is in preview, the trial should be used for the location value. trial這是參數的預設值 locationtrial is the default value for the location parameter. 例如: https://www.videoindexer.ai/accounts/00000000-0000-0000-0000-000000000000/videos/b2b2c74b8e/?location=trialFor example: https://www.videoindexer.ai/accounts/00000000-0000-0000-0000-000000000000/videos/b2b2c74b8e/?location=trial.

重要

共用播放程式或深入解析 widget 的連結將會包含存取權杖,並將唯讀許可權授與您的帳戶。Sharing a link for the Player or Insights widget will include the access token and grant the read-only permissions to your account.

公用內容Public content

  1. 登入影片索引子網站。Sign in to the Video Indexer website.
  2. 選取您想要使用的影片,然後按 [播放]。Select the video that you want to work with and press Play.
  3. 選取您想要的 widget 類型([認知深入解析]、[播放程式] 或 [編輯器])。Select the type of widget that you want (Cognitive Insights, Player, or Editor).
  4. 按一下 [ ** < / > 內嵌**]。Click </> Embed.
  5. 複製內嵌程式碼(會出現在 [複製共用 & 嵌入] 對話方塊中的內嵌程式碼)。Copy the embed code (appears in Copy the embedded code in the Share & Embed dialog).
  6. 將程式碼新增至您的應用程式。Add the code to your app.

私人內容Private content

若要內嵌私用影片,您必須在 iframe 的屬性中傳遞存取權杖 srcTo embed a private video, you must pass an access token in the src attribute of the iframe:

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

若要取得認知深入解析小工具內容,請使用下列其中一種方法:To get the Cognitive Insights widget content, use one of the following methods:

若要在內嵌 widget 中提供編輯見解功能,您必須傳遞包含編輯許可權的存取權杖。To provide editing insights capabilities in your embedded widget, you must pass an access token that includes editing permissions. 使用取得深入解析 Widget取得影片存取權杖 &allowEdit=trueUse Get Insights Widget or Get Video Access Token with &allowEdit=true.

小工具互動Widgets interaction

認知深入解析小工具可與您應用程式上的影片互動。The Cognitive Insights widget can interact with a video on your app. 本節說明如何進行此互動。This section shows how to achieve this interaction.

認知深入解析小工具影片索引子

跨來源通訊Cross-origin communications

若要讓影片索引子 widget 與其他元件通訊,影片索引子服務:To get Video Indexer widgets to communicate with other components, the Video Indexer service:

  • 使用跨原始來源通訊 HTML5 方法 postMessageUses the cross-origin communication HTML5 method postMessage.
  • 驗證 VideoIndexer.ai 來源之間的訊息。Validates the message across VideoIndexer.ai origin.

如果您執行自己的播放機程式碼,並與認知深入解析小工具整合,您必須負責驗證來自 VideoIndexer.ai 的訊息來源。If you implement your own player code and integrate with Cognitive Insights widgets, it's your responsibility to validate the origin of the message that comes from VideoIndexer.ai.

本節說明如何在兩個影片索引子 widget 之間達成互動,以便在使用者選取應用程式上的深入解析控制項時,player 會跳到相關的時間。This section shows how to achieve interaction between two Video Indexer widgets so that when a user selects the insight control on your app, the player jumps to the relevant moment.

  1. 複製播放器小工具的內嵌程式碼。Copy the Player widget embed code.
  2. 複製認知深入解析的內嵌程式碼。Copy the Cognitive Insights embed code.
  3. 新增中繼程序檔案以處理兩個小工具之間的通訊:Add the Mediator file to handle the communication between the two widgets:
    <script src="https://breakdown.blob.core.windows.net/public/vb.widgets.mediator.js"></script>

現在當使用者選取應用程式上的深入解析控制項時,player 會跳到相關的時間。Now when a user selects the insight control on your app, the player jumps to the relevant moment.

如需詳細資訊,請參閱影片索引子-內嵌這兩個小工具示範For more information, see the Video Indexer - Embed both Widgets demo.

內嵌認知深入解析小工具,並使用 Azure 媒體播放器來播放內容Embed the Cognitive Insights widget and use Azure Media Player to play the content

本節說明如何使用AMP 外掛程式來達成認知深入解析 widget 與 Azure 媒體播放機實例之間的互動。This section shows how to achieve interaction between a Cognitive Insights widget and an Azure Media Player instance by using the AMP plug-in.

  1. 新增適用于 AMP 播放程式的影片索引子外掛程式:Add a Video Indexer plug-in for the AMP player:
    <script src="https://breakdown.blob.core.windows.net/public/amp-vb.plugin.js"></script>

  2. 使用影片索引子外掛程式來具現化 Azure 媒體播放機。Instantiate Azure Media Player with the Video Indexer plug-in.

    // Init the source.
    function initSource() {
        var tracks = [{
        kind: 'captions',
        // To load vtt from VI, replace it with your vtt URL.
        src: this.getSubtitlesUrl("c4c1ad4c9a", "English"),
        srclang: 'en',
        label: 'English'
        }];
        myPlayer.src([
        {
            "src": "//amssamples.streaming.mediaservices.windows.net/91492735-c523-432b-ba01-faba6c2206a2/AzureMediaServicesPromo.ism/manifest",
            "type": "application/vnd.ms-sstr+xml"
        }
        ], tracks);
    }
    
    // Init your AMP instance.
    var myPlayer = amp('vid1', { /* Options */
        "nativeControlsForTouch": false,
        autoplay: true,
        controls: true,
        width: "640",
        height: "400",
        poster: "",
        plugins: {
        videobreakedown: {}
        }
    }, function () {
        // Activate the plug-in.
        this.videobreakdown({
        videoId: "c4c1ad4c9a",
        syncTranscript: true,
        syncLanguage: true,
        location: "trial" /* location option for paid accounts (default is trial) */
        });
    
        // Set the source dynamically.
        initSource.call(this);
    });
    
  3. 複製認知深入解析的內嵌程式碼。Copy the Cognitive Insights embed code.

您現在可以與 Azure 媒體播放機通訊。You can now communicate with Azure Media Player.

如需詳細資訊,請參閱Azure 媒體播放機 + VI 深入解析示範For more information, see the Azure Media Player + VI Insights demo.

內嵌影片索引子認知深入解析小工具,並使用不同的影片播放機Embed the Video Indexer Cognitive Insights widget and use a different video player

如果您使用 Azure 媒體播放機以外的影片播放機,您必須手動操作影片播放機以達成通訊。If you use a video player other than Azure Media Player, you must manually manipulate the video player to achieve the communication.

  1. 插入影片播放器。Insert your video player.

    例如,標準 HTML5 播放程式:For example, a standard HTML5 player:

    <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>
    
  2. 內嵌認知深入解析小工具。Embed the Cognitive Insights widget.

  3. 接聽「訊息」事件,以實作播放器的通訊。Implement communication for your player by listening to the "message" event. 例如:For example:

    <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 videobreakdown domain.
          if ((origin === "https://www.videobreakdown.com") && 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>
    

如需詳細資訊,請參閱Azure 媒體播放機 + VI 深入解析示範For more information, see the Azure Media Player + VI Insights demo.

新增字幕Adding subtitles

如果您使用自己的Azure 媒體播放機內嵌影片索引子深入解析,您可以使用 GetVttUrl 方法來取得隱藏式輔助字幕(字幕)。If you embed Video Indexer insights with your own Azure Media Player, you can use the GetVttUrl method to get closed captions (subtitles). 您也可以從影片索引子 AMP 外掛程式呼叫 JavaScript 方法 getSubtitlesUrl (如先前所示)。You can also call a JavaScript method from the Video Indexer AMP plug-in getSubtitlesUrl (as shown earlier).

自訂可內嵌的小工具Customizing embeddable widgets

認知深入解析小工具Cognitive Insights widget

您可以選擇您想要的深入解析類型。You can choose the types of insights that you want. 若要執行這項操作,請將其指定為下列 URL 參數的值,此參數會新增至您取得的內嵌程式碼(從 API 或 web 應用程式): &widgets=<list of wanted widgets>To do this, specify them as a value to the following URL parameter that's added to the embed code that you get (from the API or from the web app): &widgets=<list of wanted widgets>.

可能的值為:、、、、、、、、、、、 people animatedCharacters keywords labels sentiments emotions topics keyframes transcript ocr speakers scenesnamedEntitiesThe possible values are: people, animatedCharacters , keywords, labels, sentiments, emotions, topics, keyframes, transcript, ocr, speakers, scenes, and namedEntities.

例如,如果您想要內嵌僅包含人員和關鍵字深入解析的 widget,iframe 內嵌 URL 看起來會像這樣:For example, if you want to embed a widget that contains only people and keywords insights, the iframe embed URL will look like this:

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

iframe 視窗的標題也可透過將 &title=<YourTitle> 提供給 iframe URL 來自訂。The title of the iframe window can also be customized by providing &title=<YourTitle> to the iframe URL. (它會自訂 HTML <title> 值)。(It customizes the HTML <title> value).

例如,若您想要為您的 iframe 視窗指定標題 "MyInsights",URL w看起來會像這樣:For example, if you want to give your iframe window the title "MyInsights", the URL will look like this:

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

請注意,只有您需要在新視窗中開啟深入解析時,才適用此選項。Notice that this option is relevant only in cases when you need to open the insights in a new window.

播放器小工具Player widget

在內嵌影片索引子播放器時,您可以藉由指定 iframe 的大小來選擇播放器的大小。If you embed Video Indexer player, you can choose the size of the player by specifying the size of the iframe.

例如:For example:

<iframe width="640" height="360" src="https://www.videoindexer.ai/embed/player/<accountId>/<videoId>/" frameborder="0" allowfullscreen />

根據預設,影片索引子播放程式會自動產生以影片文字記錄為基礎的隱藏式輔助字幕。By default, Video Indexer player has autogenerated closed captions that are based on the transcript of the video. 文字記錄是從影片中,使用影片上傳時所選取的來源語言進行解壓縮。The transcript is extracted from the video with the source language that was selected when the video was uploaded.

如果您想要使用不同的語言來內嵌,可以將新增 &captions=<Language Code> 至內嵌播放機 URL。If you want to embed with a different language, you can add &captions=<Language Code> to the embed player URL. 如果您想要依預設顯示標題,您可以傳遞 &showCaptions = true。If you want the captions to be displayed by default, you can pass &showCaptions=true.

內嵌 URL 將顯示如下︰The embed URL then will look like this:

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

自動播放Autoplay

根據預設,播放程式會開始播放影片。By default, the player will start playing the video. 您可以將傳遞 &autoplay=false 至先前的內嵌 URL,以選擇不進行。you can choose not to by passing &autoplay=false to the preceding embed URL.

程式碼範例Code samples

請參閱程式代碼範例存放庫,其中包含影片索引子 API 和小工具的範例:See the code samples repo that contains samples for Video Indexer API and Widgets:

檔案/資料夾File/folder 描述Description
azure-media-player 在自訂 Azure 媒體播放機中載入影片索引子影片。Load video indexer video in a custom Azure Media Player.
azure-media-player-vi-insights 使用自訂 Azure 媒體播放機內嵌 VI 深入解析。Embed VI Insights with a custom Azure Media Player.
control-vi-embedded-player 內嵌 VI Player 並從外部進行控制。Embed VI Player and control it from outside.
custom-index-location 從自訂外部位置(可以是客戶 a blob)內嵌 VI 深入解析。Embed VI Insights from a custom external location (can be customer a blob).
embed-both-insights VI 深入解析播放機和深入解析的基本使用方式。Basic usage of VI Insights both player and insights.
embed-insights-with-AMP 使用自訂 Azure 媒體播放機內嵌 VI 深入解析 widget。Embed VI Insights widget with a custom Azure Media Player.
customize-the-widgets 使用自訂選項內嵌 VI widget。Embed VI widgets with customized options.
embed-both-widgets 內嵌 VI Player 和 Insights,並在兩者之間進行通訊。Embed VI Player and Insights and communicate between them.
url-generator 根據使用者指定的選項,產生 widget 自訂內嵌 URL。Generates widgets custom embed URL based on user-specified options.
html5-player 使用預設的 HTML5 影片播放機內嵌 VI 深入解析。Embed VI Insights with a default HTML5 video player.

後續步驟Next steps

如需如何觀看和編輯影片索引子深入解析的相關資訊,請參閱觀看和編輯影片索引子深入解析。For information about how to view and edit Video Indexer insights, see View and edit Video Indexer insights.

此外,請參閱影片索引子 CodePenAlso, check out Video indexer CodePen.