Embedding Video Indexer Widgets

Video Indexer gives you the ability to embed our visual widgets in your website after you have uploaded your video.
For doing that please implement the following steps:

Embedding public content

Step 1

Click on the "embed" button that appears in every public video page.

Step 2

After clicking this button – an embed modal will appear on the screen where you can choose what widget you want to embed in your website .
Clicking on each widget (Player, Cognitive insights) will generate the embedded code for you to paste in your website.
Choose the widget you want, and copy the embed code into your website.


Now users can see your video insights in your website.



Currently we are supporting embedding 2 widgets : Cognitive insights widget and player widget.
The cognitive insights widgets includes all visual insights that were extracted from your video indexing process.
The player widget is just a player to play your uploaded video.

Embedding private (or Org) content

Generated embed codes from embed popup (in our website) are generated for Public videos only.
If you want to embed a Private video you will have to pass the token as well in the iframe src attribute :

     https://www.videobreakdown.com/embed/[insights | player]/<VideoId>/?accessToken=<accessToken>
    
You will have to generate the iframe embed code yourself and provide it the widget link that will be generated for you by calling GetInsightsWidgetUrl from API methods.

Widgets interaction:

The cognitive insights widget can interact with your video at your website.
There is couple of possible ways to get this done:
  1. Embed both widgets in your website / blog (Recommended) [DEMO]
    Copy and paste the 2 generated codes from your video as mentioned above. If the both widgets are embedded into your website they will communicate each other by inserting the following code:
    <script src="https://breakdown.blob.core.windows.net/public/vb.widgets.mediator.js"></script> 
    That means that when a user clicks on some insight control at your website the player will jump to the relevant moment – exactly like happening in our website www.videobreakdown.com

    * Here you can find a test page that we have created in order to explore all embedding posibilities at other domain
  2. Embed our "Cognitive Insights Widget" and use your Azure Media Player [DEMO]
    if you use AMP we have written a plugin for you that will handle the communication. just paste
    <script src="https://breakdown.blob.core.windows.net/public/amp-vb.plugin.js"></script> 
    right after you loading amp library. In your code after creating the player instance and after it is ready, just call our plugin by:
        [yourAMPPlayer].videobreakdown();
            
    for better understanding how to work with Azure Media Player you can visit their DOCS
  3. Embed our cognitive Insights widget and use your own player (could be anything) [DEMO]
    If you go that way you will have to take care the communication and manipulating your player yourself. See the JavaScript code in the following example:
    (function(){
        // Reference your player instance
        var playerInstance = yourPlayerInstatnce;
    
        function jumpTo(evt) {
          var origin = evt.origin || evt.originalEvent.origin;
    
          // Validate that event comes from videobreakdown domain.
          if ((origin === "https://www.videobreakdown.com") && evt.data.time !== undefined){
            // Here you need to call your player "jumpTo" implementation
            playerInstance.currentTime(evt.data.time); 
    
            // Confirm arrival to us
            if ('postMessage' in window) {
              evt.source.postMessage({confirm: true, time: evt.data.time}, origin);
            }
          }
        }
    
        // Listen to message event
        window.addEventListener("message", jumpTo, false);
      
    }())                    
                        
                         

See our DEMO page for more options.

* Issue: Transcript widget is not in sync with the player.

Cross Origin Communications

In order to get our widgets to communicate with other components, we're the using the safe cross origin communication HTML5 method postMessage and validating the message across videobreakdown.com origin.
see browser support for postMessage here.

* If you choose to implement your own player code and doing the integration with insights widget, it will be in your responsibility to validate the origin of the message comes from videobreakdown.com.

Adding Subtitles

Using the video breakdown transcript for closed captions (subtitles)

If you embed our insights with your own AMP player you can get the subtitles tracks urls or by calling API method GetVttUrl or by calling a javascript method from our amp plugin getSubtitlesUrl.
getSubtitlesUrl gets BreakdownId as first param and Language ("English", "Spanish"...) as second param.
you can how learn to use it HERE