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:

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:

window.addEventListener("message", (event) => {
  var info = && == "time_update" && 
  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.