Events

You can capture events generated by the smartplayer to perform specific actions based on the state and progress of video playback. To capture these events it will be necessary to use an eventListener, but first let us show you how to implement them in your iframe:

<iframe
        src="https://player.scaleup.com.br/embed/510c42b9fde8af543194ea9fdc0296149cc5a1a5?events=controlsdisabled,controlsenabled,dispose,durationchange,ended,enterFullWindow,enterpictureinpicture,error,exitFullWindow,firstplay,fullscreenchange,leavepictureinpicture,loadedmetadata,loadstart,pause,play,playerreset,playerresize,playing,posterchange,progress,ratechange,ready,resize,seeked,seeking,textdata,timeupdate,useractive,userinactive,volumechange,waiting"
        allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
        allowfullscreen=""
        style="width: 100%; aspect-ratio: 16 / 9; border: 0px; margin: 0px auto"></iframe>

After declaring them, we need to capture and implement in our service:

window.addEventListener('message', event => {  
  const message = event.data;

	switch (message.eventName) {  
    case 'dispose':  
      return console.log('Player disposed');  
    case 'playing':  
      return console.log('Player is playing');  
    case 'waiting':  
      return console.log('Player is waiting');  
    case 'pause':  
      return console.log('Player is paused');  
    case 'ended':  
      return console.log('Player stopped playing');  
    case 'progress':  
      return console.log('Player''s Buffer: ' + message.percentage + '%');  
    case 'timeupdate':  
      return console.log('Time: ' + message.currentTime + '| Video duration: ' + message.duration + '| Video''s percentage: ' + message.percentage + '%');
    case 'questionResponse':
      return console.log('Question answered: ' + message.questionIndex + '| Response: ' + message.response + '| Right answer: ' + message.isCorrect);
    case 'summaryChange':
      return console.log('Is summary: ' + message.isSummary);
  }  
});

This is the result in the browser console:

[Log] Player's Buffer: 9% (x2)  
[Log] Time: 9.975009531014969 (x2) | Video duration: 100 | Video's percentage: 9%
[Log] Time: 10.144443072655653 (x2) | Video duration: 100 | Video's percentage: 10%
[Log] Player is paused (x2)  
[Log] Player's Buffer: 10% (x4)  
[Log] Player is playing (x2)
[Log] Question answered: 1 | Response: c | Right answer: false
[Log] Is summary: true

Available events

Event	Description
controlsdisabled	Fired when the video player controls are disabled.
controlsenabled	Fired when the video player controls are enabled.
dispose	Fired when the video player is removed or destroyed.
durationchange	Fired when the video duration is changed.
ended	Fired when the video reaches its end (when playback is completed).
enterFullWindow	Fired when the video player enters full window mode.
enterpictureinpicture	Fired when the video player enters Picture-in-Picture mode.
error	Fired when an error occurs during video playback.
exitFullWindow	Fired when the video player exits full window mode.
firstplay	Fired when the video is played for the first time.
fullscreenchange	Fired when the full-screen state of the video player changes.
leavepictureinpicture	Fired when the video player exits Picture-in-Picture mode.
loadedmetadata	Fired when the video metadata is loaded.
loadstart	Fired when the video loading starts.
pause	Fired when the video playback is paused.
play	Fired when the video playback starts.
playerreset	Fired when the video player is reset to its original state.
playerresize	Fired when the video player is resized.
playing	Fired when the video is being played.
posterchange	Fired when the video poster image (preview image) is changed.
progress	Fired during video loading, contains: currentTime, duration and percentage.
questionResponse	Fired when user answers the quiz, contains: questionIndex, response, isCorrect.
ratechange	Fired when the video playback rate is changed.
ready	Fired when the video player is ready to play the video.
resize	Fired when the video player is resized.
seeked	Fired when the video playback moves to a new time point.
seeking	Fired when the video playback is seeking to a new time point.
summaryChange	Fired when the video swaps between summary video and normal version, contains: isSummary.
textdata	Fired when the video's text data (subtitles or additional information) is available.
timeupdate	Fired when the video playback time is updated, contains: currentTime, duration and percentage.
useractive	Fired when the user is active and interacts with the video player.
userinactive	Fired when the user is inactive and does not interact with the video player.
volumechange	Fired when the video volume level is changed.
waiting	Fired when the video is paused, waiting for more data to be loaded.