Use the Wistia API and Plugins to Add a Rewind Button

The Wistia API and plugins

Wistia provides a documented JavaScript API^[2]. 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^[3] 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:

/**
 * @package   MyPlugin
 * @license   https://www.gnu.org/licenses/gpl.html 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:

/**
 * @package   Rewind
 * @license   https://www.gnu.org/licenses/gpl.html 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
            rewindButton.style.position = 'absolute';
            rewindButton.style.top = '2px';
            rewindButton.style.right = '2px';
            rewindButton.style.width = '30px';
            rewindButton.style.height = '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
            video.grid.center.appendChild(rewindButton);

            // Add the action to the button
            rewindButton.addEventListener('click', function() {
                // Get the current time in the video
                // https://wistia.com/doc/player-api#time
                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
                // https://wistia.com/doc/player-api#timeval
                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.

...
<div id="wistia_lq4ie79g8o" class="wistia_embed" style="width:640px; height:360px;"></div>
<script charset="ISO-8859-1" src="https://fast.wistia.com/assets/external/E-v1.js"></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: 'https://.....'
            // }
        }
    });
</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.