What are javascript events and how can I use them with my embedded video?

Javascript events are custom events that emitted from the Mindstamp player throughout the experience.

You are able to listen to these on your website to take action based on these events.

For example:
Redirect the webpage once the video ends
Unhide a button once the video reaches a certain time
Submit a form if the viewer clicks a button


We offer the following video lifecycle events:
video_play
video_pause
video_end
time_update
progress_10
progress_25
progress_50
progress_75
progress_90
progress_100
viewer_interaction

You can listen for these events using standard javascript message listener:

window.addEventListener("message", (event) => {
  // event.data contains information
}, false);

The event structure 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 = 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
  }

The structure for a viewer_interaction event is as follows:

event: {
  data: {
    event: "viewer_interaction",
    version: 1, // Version of the player events, similar to API version,
    info: {
      title: "The Video Title",
      currentTime: 2, // Time in video occurred at
      token: 'reoCjremf', // Unique identifier for a video
      data: {
        interaction_id: 'xxxxx' // Unique identifier of interaction
        interaction_type: 'click', // Click or reply
        interaction_value: 'Buy now' // Value of interaction
        parent_id: 'zzzzz' // Unique identifier of parent interaction
        parent_type: 'button' // Type of parent interaction (button, hotspot, question, etc)
        parent_value: 'Buy now'// Value of parent interaction. Question prompt, button label, etc.
        question_style: null, // If parent was question, this contiains the type,
        has_correct_answer: null, // If parent was question, indicates whether correctness was set
        answered_correctly: null // If parent was question and correctness was set, indicates whether viewer answered correctly
      }
    }
  }
}

If you wanted to take an action if a user clicked a "Buy Now" button, you would listen like this:

window.addEventListener("message", (event) => {
  var info = event.data && event.data.event == "viewer_interaction" && event.data.info 
  if (info && info.data.parent_value == 'Buy Now') {
    // Take your action here 
  }

We also offer player control events, in which you can play, pause, and seek the video player using Javascript.

Please review the README for complete information on javascript events: https://mindstamp.readme.io/reference/javascript-events

You can see a live example of events being logged here: https://v.1mb.site/events.html

Updated on: 03/01/2024