Video player events and analytics

You can register to a variety of video player events and then use these events to create custom video player controls or to trigger other custom behaviors in your application.

Additionally, many of these events can be tracked for Google Analytics or other analytics trackers.

Using video events

The video player supports standard HTML5 video player events as well as several specific Cloudinary video player events.

For example, you can define a set of percentages that will trigger the percentsplayed event and then perform some operation when the player reaches any of those points. Below, the captured percentages are written to the console log:

var vplayer = cld.videoPlayer("my-video", { playedEventPercents: [10, 50, 90] })

vplayer.on('percentsplayed', (event) => {
  console.log(event.eventData.percent + " percents played")

Take a look at the Events sample on the Video Player demo page to see some of the events that are triggered as you perform operations on the video player.

Available events

For details on all available events, see Events in the Video Player API Reference.

Tracking video player analytics

You can track important data about how and when your customers are watching your videos by capturing relevant events. You can then pass this data to your Google Analytics account or other analytics trackers. The instructions below are specific to Google Analytics.

1. Activate analytics in your video player

You can either set the analytics parameter to true, which monitors all available events except timeplayed (percentplayed is monitored), or you can specify the specific events you want to monitor, including additional event sub-settings where relevant ('percentsplayed', percents and 'timesplayed', times. See example below).

var vplayer = cld.videoPlayer({ ... , analytics: true })

Or

var vplayer = cld.videoPlayer({ ... , analytics: { 
  events: ['play', 'pause', 'ended', { type: 'percentsplayed', percents: [10, 40, 70, 90] }, 'error']
} })

2. Include the Google Analytics code snippet in your page

Include the Google Analytics tracking snippet with your Google tracking ID near the top of the tag in your HTML page.

For details, see Google Analytics tracking snippet.