Use the Wistia API and Plugins to Add a Rewind Button

Use the Wistia API and Plugins to Add a Rewind Button

We use Wistia to host all our videos and provide a great viewing experience for our users.

The Wistia platform offers many useful features out-of-the-box, including the design of the player, video controls, social sharing, timeline actions, and more. If you login to your Wistia account, you’ll be able to customize all these features using their friendly admin panel.

However, Wistia also has an API that allows you to add your own customizations. From a developer perspective, I want to show you how to take advantage the Wistia API to adding extra features to their video player.

The image below shows the Wistia videos hosted here at Our developers have used the Wistia API to add many customizations.

wistia example video at OSTraining

The Wistia API and plugins

Wistia provides a documented JavaScript API. This API allows you to embed your video, customizing and controlling many aspects of your video player.

Many of Wistia’s default features are packaged as plugins. Plugins are additional scripts you can add to your video, giving it new functionality and adding new interfaces. You can enable, disable or even modify these plugins. A good example of

A good example of plugins are embed options which include dim-the-lights, turnstile,resumable, and others. These can be a nice starting point for your research.

To use these plugins, make sure you are using the HTML5 player, not the Flash Player. No API is provided for the Flash Player and so custom plugin will not work.

Creating a basic Wistia plugin structure

For any plugin you create, you can use the same basic structure I have below:

{codecitation javascript}

/**  * @package   MyPlugin  * @license GNU/GPL  */  Wistia.plugin('myplugin', function(video) {     // Wait for the video element to be fully loaded     interval = setInterval(function() {         if (video.elem() != null) {             clearInterval(interval);             interval = null;              // Your magic goes here         }     }, 500);      return {         'myplugin': this     }; });


Adding the custom Wistia plugin feature

Now that we have a basic plugin, let’s use it to add a new feature. What will the plugin do? It will rewind the video for “n” seconds.

This will be a simple feature with no fancy interface integration. We will just have a button at the top of the video, allowing the user to rewind.

Later, in my next post, I’ll share some tips about how to hack the interface and customize the button, making it look like a native Wistia control.

One key concept to understand is that in HTML5 video, all the controls and wrappers are basically a set of HTML, CSS, and JavaScript elements. We just need to find out where we want to display our custom element, and how to interact with the provided API or native video element.

Check the comments in the code below:

{codecitation javascript}

/**  * @package   Rewind  * @license GNU/GPL  */  Wistia.plugin('rewind', function(video) {     // Wait for the video element to be fully loaded     interval = setInterval(function() {         if (video.elem() != null) {             clearInterval(interval);             interval = null;              // Get the option with the period we want to rewind.             // We will see later how to set options             var rewindTime = video.options.rewindTime;              // Create the button, using a native JS method             var rewindButton = document.createElement('button');              // Set a basic style just to display it on the position we want    = 'absolute';    = '2px';    = '2px';    = '30px';    = '20px';              // Set the button text, to display the configured rewind time             rewindButton.innerText = '< ' + parseInt(rewindTime);              // Let's inject the button into the video player's grid   ;              // Add the action to the button             rewindButton.addEventListener('click', function() {                 // Get the current time in the video                 //                 var currentTime = wistiaEmbed.time()                  // Get the target time we desire                 var newTime = parseInt(currentTime - rewindTime);                  // Just check if we have a negative time, and reset to 0                 if (newTime < 0) {                     newTime = 0;                 }                  // Set the time in the video                 //                 wistiaEmbed.time(newTime);             });         }     }, 500);      return {         'rewind': this     }; });


We are using only native JavaScript, but feel free to use other libraries like jQuery. It will make your work easier.

Loading and testing the Wistia plugin

There are other ways to load Wistia player and your plugin asynchronously, but just to keep it simple for now, here is how you can load and test your plugin.

{codecitation html}

... <div id="wistia_lq4ie79g8o" class="wistia_embed" style="width:640px; height:360px;"></div> <script charset="ISO-8859-1" src=""></script> <script>     // Considering our video ID as: lq4ie79g8o     // Instantiate the embed player     window.wistiaEmbed = Wistia.embed("lq4ie79g8o", {         // Set the value for the global param we accessed from the plugin using:         // ... video.options.rewindTime         rewindTime: 10,         plugin: {             // Here is a list of plugins you want to load             'rewind': {                 src: 'file:///Users/anderson/Projects/ostraining/tmp/wistia-blog/plugin.js'             }             // To add multiple plugins, just add new items             // ,             // 'other_plugin': {             //      src: 'http://.....'             // }         }     }); </script> ...


The image below is a preview of how the rewind button will appear for you. For better styling, we can work with different grid positions and use some native CSS classes with the “romulus” prefix. We will cover these subjects in an upcoming blog post. Whethere you’re using Joomla, WordPress, Drupal or another platform for your videos, you’ll be able to create a great-looking experience with Wistia.

wistia rewind plugin

{snippet wistiapromo}


0 0 votes
Article Rating
Notify of

Inline Feedbacks
View all comments
Would love your thoughts, please comment.x