Video Player events and analytics
Last updated: Aug-03-2022
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 = cloudinary.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).
Or
var vplayer = cloudinary.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.