Vidyard recently switched to a new user interface. Click here to compare the previous and current menu.

Trigger Javascript actions at certain viewing milestone with progress events

What it does

Vidyard Progress Events allow you to trigger any javascript action in-browser when a player hits a certain viewing milestone (% of video watched). Most commonly, and in the example below, this feature is used to push engagement data into any third party application you'd like at specified viewing milestones.  

How to use it

The code for progress events needs to sit below all embedded players. It is best to write this directly before the close </body> tag. 

First line: Instantiate the Vidyard Player API:

<script type='text/javascript' src="//play.vidyard.com/v0/api.js"></script>

Second line: Instantiate Vidyard Progress events

<script type='text/javascript' src="//play.vidyard.com/v1/progress-events.js"></script>

Third line: Call the Vidyard API. The following snippet calls the Vidyard API at certain viewing milestones (% of video watched) to push an element of the Vidyard 'result' object (which contains all your player data) to a third party application through its API.  

<script type='text/javascript'>
    // var c = new Vidyard.player("");
    VidyardProgressEvents(function (result){
        // Third party API call to push data into system
    }, [1,25,50,75,100]);
</script>

To customize this snippet, you need to:

  • Specify an action (the most common action is to post data to a third party application, but you can use any javascript action)
  • Specify the data you want to call from the results object
  • Specify the viewing milestones (% of video watched) at which this event should fire. 

Example: You could push the player and video name, as well as the percentage viewed to a metrics platform for your choice (Kissmetrics, Domo, etc). You could also trigger actions on the page when a certain amount of the video is watched. (E.g. at 75% display a promotional code to your viewer.)

Available data

All the data you can access to push into the player API is available through the result object. You can call this data through the Vidyard Player APIand specify what type of data to call within the { } brackets after your specified action (eg. console.log).

Here is what is contained within the results object: 

Result
Is

result.player

The player object responsible for firing the event.

Contains:

  • Player metadata
  • Video Object
    • Contains video attributes (Name, length, description, etc)

View a complete list of properties in the player object.

result.chapter

The numerical index of the chapter being played.
Example: First video in the playlist = 1

result.event

The percentage of the video which has been viewed.
Example: 25% of the video has been viewed.

Example

In this example, we'll use console.log as the action, call result.event (to display viewing progress), and display this data at the following viewing milestones (% of video watched): 1,25,50,75,100

This progress event will print view data to the console log when the viewer has watched 1%, 25%, 50%, 75%, and 100% of the video. 

<!DOCTYPE html>
<head>
</head>
<body>
    <script type='text/javascript' id='vidyard_embed_code_HFgE1I16PiLBqKUNqHz73A' src='//play.vidyard.com/HFgE1I16PiLBqKUNqHz73A.js?v=3.1.1&type=inline'></script>
    <script type='text/javascript' src="//play.vidyard.com/v0/api.js"></script>
    <script type='text/javascript' src="//play.vidyard.com/v1/progress-events.js"></script>
    <script type='text/javascript'>
        // var c = new Vidyard.player("");
        VidyardProgressEvents(function (result){
            console.log(`${result.player.metadata.chapters_attributes[result.chapter].video_attributes.name}: ${result.event}%.`);
        }, [1,25,50,75,100]);
    </script>
</body>
</html>

Was this article helpful?

Can’t find what you’re looking for? Please contact us below.

Email Vidyard Support
Why you didn't like the article?

If you would like Vidyard to get in contact with you regarding your feedback, please enter your email address.

  • No, Thanks