The Wistia video player has a JavaScript API which supports a number of ways to interact with and control the video player. It uses the same interface for both Flash and HTML5 versions of the player, and provides convenience functions to accomplish common goals.

Note: for custom javascript you write to interface with a Wistia embed, add it to your source under the Wistia embed (ie. the footer)

Accessing the Player API is different depending on the type of embed code you're using.

• For the iframe embed code (this is the default embed type), you can use the iframe player API.
• Or, if you're using the API embed code, you can access the JavaScript API directly.

To access the API when using iframe embed codes, you just need to include an extra script on your page and you're off to the races. Take a look at the iframe player API page for all the details.

The 'API' version of the Wistia embed codes includes a variable wistiaEmbed to make this easy.

var wistiaEmbed = Wistia.embed("bfc34aa023", { ... options ... });

In this instance, you can reference the video object using the wistiaEmbed variable. If you have multiple videos on your page, you should update this variable to something specific to this video.

As an example, if the following JS code is executed, the video will start to play:

wistiaEmbed.play();

Wistia's video player API provides functionality to easily accomplish common goals.

In this example, let's assume that we want to fire a Javascript function when the viewer gets 60 seconds into the video. In order to accomplish this, we only need the bind method from the API. The Javascript code can be seen below:

<script type="text/javascript"> 
  wistiaEmbed.bind("timechange", function (t) {
    if(t > 60 && t < 62) {
      // Insert code to be executed here
    }
  });
</script> 

The bind function monitors the state of the video in an event loop. Every 500 milliseconds, it checks to see if the video's time position has changed. If it has, it runs your function with the current time (t) as the only argument.

<script type="text/javascript"> 
  wistiaEmbed.bind("end", function () {
    alert("Hello world!");
  });
</script> 

With Wistia Turnstile, you can require your viewers to enter an email address to view video content on your webpage. Using the “conversion” event, you can trigger actions based on the email being entered - including passing that email on to another service!

<script type="text/javascript">
wistiaEmbed.bind("conversion", function(type, val) {
// function to be executed
});
</script>

At this time, the “type” of conversion is always 'pre-roll-email', and the “val” is the viewers email address.

With the bind method, every time “play” is triggered, your function will be executed. But sometimes a user will scroll back to the beginning and hit Play again. If you want to avoid your function being executed again, you need to unbind it.

<script type="text/javascript">
  function playFunc() {
    alert("Played the first time!");
    wistiaEmbed.unbind("play", playFunc);
  }
  wistiaEmbed.bind("play", playFunc);
</script>

In our example embed Wistia.embed(“bfc34aa023”, { … options … }); there are two arguments: the media's hashed ID, and a set of embedding options. Here is a list of available options:

To show how options work, suppose I want to embed a video that defaults to the HTML5 player and plays automatically on page load. I might alter the embed javascript to look like this:

<div id="my_container"></div>
<script type="text/javascript"> 
  var wistiaEmbed = Wistia.embed("bfc34aa023", {
    platformPreference: "html5",
    autoPlay: true,
    container: "my_container"
  });
</script>

Our plugins have a lot of options too! Check them out:

• Socialbar
• Post-Roll Call To Action
• Interactive Transcript
• Turnstile Email Capturing

And if you're looking at these, you might want more info on constructing an embed code.