Comment on page
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.
<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>
<script src="https://cdn.annoto.net/widget-iframe-api/latest/client.js"></script>
<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>
<script src="https://cdn.annoto.net/widget-iframe-api/latest/client.js"></script>
<script>
var annoto = new AnnotoIframeApi.Client(document.getElementById("wistia-player-id"));
annoto.onSetup(function(next) {
next({
clientId: 'eyJhbGciOiJIUzI1NiJ9...',
});
});
</script>
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 3yr ago