Kaltura Plugin
Single Sign On
Customise Widget Configuration
The Annoto Widget is loaded inside the wistia player iframe so direct access to the Widget API and configuration is not possible.
Luckily we provide a helper script that exposes API to configure the widget and perform API actions.
Load the Iframe API Script
1
<iframe src="https://fast.wistia.net/embed/iframe/r440odi4pc?seo=false&videoFoam=true&&plugin%5Bannoto%5D%5Bsrc%5D=https%3A%2F%2Fcdn.annoto.net%2Fwistia-plugin%2Flatest%2Fplugin.js" title="Borrowed video: Welcome to Wistia!" allow="autoplay; fullscreen" allowtransparency="true" frameborder="0" scrolling="no" class="wistia_embed" name="wistia_embed" allowfullscreen msallowfullscreen width="100%" height="100%"></iframe>
2
<script src="https://cdn.annoto.net/widget-iframe-api/latest/client.js"></script>
Copied!
Setup the Iframe Client API
1
<iframe src="https://fast.wistia.net/embed/iframe/r440odi4pc?seo=false&videoFoam=true&&plugin%5Bannoto%5D%5Bsrc%5D=https%3A%2F%2Fcdn.annoto.net%2Fwistia-plugin%2Flatest%2Fplugin.js" title="Borrowed video: Welcome to Wistia!" allow="autoplay; fullscreen" allowtransparency="true" frameborder="0" scrolling="no" class="wistia_embed" name="wistia_embed" allowfullscreen msallowfullscreen width="100%" height="100%"></iframe>
2
<script src="https://cdn.annoto.net/widget-iframe-api/latest/client.js"></script>
3
<script>
4
var annoto = new AnnotoIframeApi.Client(document.getElementById("wistia-player-id"));
5
annoto.onSetup(function(next) {
6
next({
7
clientId: 'eyJhbGciOiJIUzI1NiJ9...',
8
});
9
});
10
</script>
Copied!
The Iframe Client API requires the Wistia player Iframe embed element as constructor argument:
new AnnotoIframeApi.Client(document.getElementById("wistia-player-id"))annoto.onSetup() provides opportunity to config set the Widget Configuration, for example configure the clientId (Annoto API key).Once configuration object is ready, call
next(config) to bootstrap the widget inside the Wistia player iframe.config.widgets[0].player.type and element are setup for Wistia internally by the plugin.If player configuration callbacks are provided:
config.widgets[0].player.mediaDetails()
config.widget[0].player.mediaSrc()
They are called synchronously when next(config) is called. So the media details and the source should be already available at the time when next(config) is called.
The callbacks are called once during the setup.
It is NOT recommended to use theconfig.widget[0].player.mediaSrc()for the Wistia player plugin.Last modified 1yr ago
Export as PDF
Copy link