Players Lifecycle Events

Track your viewers progress

The following events are emitted from the player during the player state change or progress update:

• video_play
• video_pause
• video_end
• time_update
• progress_10
• progress_25
• progress_50
• progress_75
• progress_90
• progress_100
• video_unavailable
• playback_error

The structure of a lifecycle event is as follows:

JavaScript

event: {
  data: {
    event: "video_play", // Name of the event
    version: 1, // Version of the player events, similar to API version,
    info: {
      title: "The Video Title",
      token: reoCjremf // Unique identifier for a video	
      currentTime: 2, // Time in video occurred at,
      formattedTime: 0:02 // MM:SS formatted current time,
      duration: 41 // Integer duration of video,
      formattedDuration: 0:41 //MM:SS formatted duration
    }
  }
}

For example, if you were to be listening for a time_update event, the following listener code would log each time_update event:

JavaScript

window.addEventListener("message", (event) => {
  var info = event.data && event.data.event == "time_update" && event.data.info 
  if (info) {
    var newTime = info.currentTime
    console.log("New Time: " + newTime)
    // Take your action here based on the newTime
  }
}, false);

🚧

Note that progress events represent the current time in the video. Therefore, if navigation is enabled, a viewer could skip to the end of the video and emit a progress_100 event without watching 100% of the video. If you need accurate percentage, consider using Webhooks or the API instead.

📘

Get in Touch

Need help or want to know more about JavaScript Events for Mindstamp? We're here for you! Contact [email protected] to learn more.