Wistia Video Player API Examples

First, try embedding your video onto your page, to make sure it works properly without the chaptering links.

Next, review the source code for your embedded video on your page. You'll notice some javascript similar to the following:

<script type="text/javascript">wistiaEmbed = Wistia.embed("bfc34aa023", { ... options ... });</script>

The wistiaEmbed variable can be used to control the video. If you plan to have multiple videos on your page, change the wistiaEmbed variable to something more specific, like the name of your video (ie. mattDamon).

The template link below can be used to help build the chapter links. Replace the “wistiaEmbed” with your video's variable name, change the '60' to your desired time (in seconds), and replace the “Your link text here” with the text you wish to appear as your link text.

<a href="#" onclick="wistiaEmbed.time(60);return false;">Your link text here</a> 

This is all that is necessary to create chaptering link for your embedded video. If you wish to create multiple chaptering links for the same video, simply copy the link you created and replace the link text and seek time with the appropriate values.

First, create a Description Sidebar Element on the page where the video is displayed. To do this, hover over the green Media Actions menu and choose “Add Sidebar Element”. You will see a dialog box appear that will offer you two choice. Click “Add” for the Description Sidebar Element. You new Description Sidebar Element will appear on the right hand side.

Next, it is important to get the Description element into the mode where we can enter the chapter information. To do this, click the “Edit” button below the element. This will switch it into Edit mode. Next, click the “Advanced” button in the lower left-hand corner of the element. Finally, click the “Source” button shown in the image to allow the necessary source code needed to create chapters in the video.



The structure of the code to create Chapter links is as follows:

<p>
  <span style="font-size:18px;">
    <a href="#media" onclick="parent.theMediaEmbed.seek(90);return(false);">1:30 New Section</a>
  </span>
</p>

To modify this code for your video, simply replace the number in the ”.seek(90)” with the location that you wish the chapter marking to seek to in seconds. Next, edit the text “1:30 New Section” between the '>' and the '<' to be the text that you wish to display for that chapter.

Once you have made these edits, copy the code and paste it into the Description editor that is already in Source mode. Simply click the “Save” button and your working Chapter link should appear.

To mute a video on load, you can simply set the volume to 0 on your video object. This can be done immediately on embed.

<!-- YOUR EMBED CODE -->
<div id="wistia_47254d52b7" style="height:360px;width:640px;"></div>
<script type="text/javascript" src="http://static.wistia.com/static/E-v1.js"></script>
<script type="text/javascript">mutedEmbed = Wistia.embed("47254d52b7").volume(0);</script>
<!-- END YOUR EMBED CODE -->