Video Indexer embeddable widgets is a great way to start adding AI insights to your videos. Whether you want to add deep search ability to your published videos or let your users be more engaged with the video content on your website, you can easily achieve that by using the embeddable option at Video Indexer web application or by using Video Indexer API.
Getting Started
To get started embedding Video Indexer insights to your website you must have a registered account. If you don't have an account you can easily Sign-In to Video Indexer using a Microsoft, Google, LinkedIn, or Azure Active Directory and get one generated for you.
Video Indexer supports embedding two types of widgets into your application: Cognitive Insights and Player.
Cognitive Insights Widget
This widget contains all the visual insights that were extracted from the video after the indexing process such as people appearances, top keywords, sentiment analysis, transcript and search.
It also allows you to change the language and get all the insights based on the selected language. Here is an example:
Player Widget
The player widget is a customized Azure Media Player that except of providing video streaming, contains extra features such as playback speed and closed captions. Here is an example:
In order to embed a widget in your website you need to get an embed code and paste it in your html file. The embed code contains iframe tag with embed URL.
You have two options to get the embed URL: via Video Indexer web application or by calling Video Indexer API specific method. We will cove both ways.
Get your embed code via Video Indexer web application (Public videos only)
You can easily get the embed code for your indexed videos with a click of a button:
1. Login to your account at VI
2. Upload a video
3. After indexing process has completed click “play” on the video at the main gallery page.
4. Click the “embed button” and select the widget you want to embed with the desired options. (player/insights)
5. Copy and paste the code into your html file.
Notice: if you embed via the web application you can embed only public videos. Private videos requires accessToken parameter in the embed URL that contains 1h access token for the video.
Get your embed code via Video Indexer API (Public or Private videos)
In order to get the embed URL that contains the accessToken for your video you can use Video Indexer API and call Get Insights Widget Url or Get Player Widget Url by passing the video id.
If you manage your own videos you can also get the embed code based on your internal video id by calling Get Insight Widget By External Id.
In order to start working with the API you will have to register and get your API subscription key first. The Getting started with the Video Indexer API blog post is where you will find a very detailed blog post about getting started with Video Indexer API.
After you have your embed URL just paste it as “src” attribute of an iframe element which you want to locate anywhere in your website.
<iframe width="580" height="580" src="https://www.videoindexer.ai/embed/insights/c4c1ad4c9a/?widgets=people,search" frameborder="0" allowfullscreen></iframe>
Embedding options
Video Indexer widgets are customizable per your need. You can choose to embed only the insights widget or the player, or embed them both.
Embed both types of widgets in your application
Copy and paste the embed codes for the player widget and the insights widget and include the following JS file before the closing <body> tag:
<script src="https://breakdown.blob.core.windows.net/public/vb.widgets.mediator.js"></script>
The above file is required in order to handle cross origin communications between the widgets.
You can read more about how it works at our docs.
Embed cognitive insights and use your Azure Media Player
If you are using Azure Media Player in your website you can easily embed Video Indexer insights widget that will communicate with your player using vi communication plugin. Just paste the following script in your page after azure media player library script and you are all set.
<script src="https://breakdown.blob.core.windows.net/public/amp-vb.plugin.js"></script>
The plugin let you also get the VTT file for your player and choose if you want to sync between language and transcript with your video.
For more information and code samples see the relevant Video Indexer docs.
Embed cognitive insights with any video player
If you are using other players like YouTube player, Vimeo or your own player you can still embed Video Indexer cognitive insights and make them communicate with your player, for example jump into the relevant moment when user clicks on one of the widgets.
In order to achieve that you will have to implement some functions and listen to “postMessage” JavaScript event.
Here is a detailed demo that demonstrates this approach.
How to customize Video Indexer widgets?
Video Indexer widget are customizable per your need. You can choose to embed only the insights that you think will be more valuable for your users.
Customize the cognitive insights widget
You can choose the types of insights you want by specifying them as a value to the following URL parameter added to the to the embed code you get (from API or from the web application):
&widgets=<list of wanted widgets>
The possible values are: people, keywords, sentiments, transcript, search.
For example, if you want to embed widget containing only people and search insights the iframe embed URL will look like this:
https://www.videoindexer.ai/embed/insights/c4c1ad4c9a/?widgets=people,search
You can see a detailed demo here and read more at Video Indexer docs.
Customize the player widget
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/{id}” frameborder="0" allowfullscreen />
By default Video Indexer player will have auto generated closed captions based on the transcript of the video that was extracted from the video with the source language that was selected when the video was uploaded.
If you want to embed with a different language you can add &captions=< Language | ”all” | “false” > to the embed player URL or put “all” as the value if you want to have all available languages captions.
The embed URL then will look like this : https://www.videoindexer.ai/embed/player/6bc9113d26/?captions=italian. If you want to disable captions you can pass “false” as value for captions parameter.
Auto play – by default the player will start playing the video. you can choose not to by passing &autoplay=false to the embed URL above.
For more details, please take a look at the Video Indexer Documentation. Follow us on Twitter @Video_Indexer to get the latest news on the Video Indexer. If you have any questions or need help, contact us at visupport@microsoft.com.
Quelle: Azure
Published by