Merge pull request #91585 from nofaredanoren/main

Video Indexer - add more embed options for insights + player widgets

Author: jborsecnik

articles/azure-video-analyzer/video-analyzer-for-media-docs/video-indexer-embed-widgets.md

@@ -2,7 +2,7 @@
 title: Embed Azure Video Analyzer for Media (formerly Video Indexer) widgets in your apps
 description: Learn how to embed Azure Video Analyzer for Media (formerly Video Indexer) widgets in your apps.
 ms.topic: how-to
-ms.date: 03/29/2022
+ms.date: 04/15/2022
 ms.author: juliako
 ms.custom: devx-track-js
 ---
@@ -21,13 +21,14 @@ A Cognitive Insights widget includes all visual insights that were extracted fro
 
 |Name|Definition|Description|
 |---|---|---|
-|`widgets` | Strings separated by comma | Allows you to control the insights that you want to render.<br/>Example: `https://www.videoindexer.ai/embed/insights/<accountId>/<videoId>/?widgets=people,keywords` renders only people and keywords UI insights.<br/>Available options: people, animatedCharacters, keywords, labels, sentiments, emotions, topics, keyframes, transcript, ocr, speakers, scenes, and namedEntities.|
+|`widgets` | Strings separated by comma | Allows you to control the insights that you want to render.<br/>Example: `https://www.videoindexer.ai/embed/insights/<accountId>/<videoId>/?widgets=people,keywords` renders only people and keywords UI insights.<br/>Available options: people, animatedCharacters ,keywords, audioEffects, labels, sentiments, emotions, topics, keyframes, transcript, ocr, speakers, scenes, spokenLanguage, observedPeople and namedEntities.|
 |`controls`|Strings separated by comma|Allows you to control the controls that you want to render.<br/>Example: `https://www.videoindexer.ai/embed/insights/<accountId>/<videoId>/?controls=search,download` renders only search option and download button.<br/>Available options: search, download, presets, language.|
 |`language`|A short language code (language name)|Controls insights language.<br/>Example: `https://www.videoindexer.ai/embed/insights/<accountId>/<videoId>/?language=es-es` <br/>or `https://www.videoindexer.ai/embed/insights/<accountId>/<videoId>/?language=spanish`|
 |`locale` | A short language code | Controls the language of the UI. The default value is `en`. <br/>Example: `locale=de`.|
 |`tab` | The default selected tab | Controls the **Insights** tab that's rendered by default. <br/>Example: `tab=timeline` renders the insights with the **Timeline** tab selected.|
+|`search` | String | Allows you to control the initial search term.<br/>Example: `https://www.videoindexer.ai/embed/insights/<accountId>/<videoId>/?search=azure` renders the insights filtered by the word “azure”. | 
+|`sort` | Strings separated by comma | Allows you to control the sorting of an insight.<br/>Each sort consist of 3 values: widget name, property and order, connected with '_' `sort=name_property_order`<br/>Available options:<br/>widgets: keywords, audioEffects, labels, sentiments, emotions, keyframes, scenes, namedEntities and spokenLanguage.<br/>property: startTime, endTime, seenDuration, name and id.<br/>order: asc and desc.<br/>Example: `https://www.videoindexer.ai/embed/insights/<accountId>/<videoId>/?sort=labels_id_asc,keywords_name_desc` renders the labels sorted by id in ascending order and keywords sorted by name in descending order.| 
 |`location` ||The `location` parameter must be included in the embedded links, see [how to get the name of your region](regions.md). If your account is in preview, the `trial` should be used for the location value. `trial` is the default value for the `location` parameter.| 
-|`search`|A free text for search |Allows you to control the initial search term. Example - `https://www.videoindexer.ai/embed/insights/<accountId>/<videoId>/?search=vi` renders the insights filtered by the word "vi".|
 
 ### Player widget
 
@@ -36,7 +37,7 @@ You can use the Player widget to stream video by using adaptive bit rate. The Pl
 |Name|Definition|Description|
 |---|---|---|
 |`t` | Seconds from the start | Makes the player start playing from the specified time point.<br/> Example: `t=60`. |
-|`captions` | A language code | Fetches the caption in the specified language during the widget loading to be available on the **Captions** menu.<br/> Example: `captions=en-US`. |
+|`captions` | A language code / A language code array | Fetches the caption in the specified language during the widget loading to be available on the **Captions** menu.<br/> Example: `captions=en-US`, `captions=en-US,es-ES` |
 |`showCaptions` | A Boolean value | Makes the player load with the captions already enabled.<br/> Example: `showCaptions=true`. |
 |`type`| | Activates an audio player skin (the video part is removed).<br/> Example: `type=audio`. |
 |`autoplay` | A Boolean value | Indicates if the player should start playing the video when loaded. The default value is `true`.<br/> Example: `autoplay=false`. |
@@ -306,6 +307,13 @@ See the [code samples](https://github.com/Azure-Samples/media-services-video-ind
 
 For more information, see [supported browsers](video-indexer-overview.md#supported-browsers).
 
+## Embed and customize Azure Video Analyzer for Media widgets in your app using npm package
+Using our [@azure/video-analyzer-for-media-widgets](https://www.npmjs.com/package/@azure/video-analyzer-for-media-widgets) NPM package, you can add the insights widgets to your app and customize it according to your needs.
+
+Instead of adding an iframe element to embed the insights widget, with this new package you can easily embed & communicate between our widgets. Customizing your widget is only supported in this package - all in one place.   
+
+For more information, see our official [GitHub](https://github.com/Azure-Samples/media-services-video-indexer/tree/master/Embedding%20widgets/widget-customization#readme).
+
 ## Next steps
 
 For information about how to view and edit Video Analyzer for Media insights, see [View and edit Video Analyzer for Media insights](video-indexer-view-edit.md).