Synchronize pipe video recorder and embedded videos

Dear Qualtrics Community,
I want to video record participants while they are watching videos. The videos are embedded in Qualtrics. For the video recording I use the Pipe video recorder.
I need the JS code so that:
When participants press the play button of the embedded video in Qualtrics, then the pipe video recorder starts recording them.
When the embedded video is finished, then the pipe video recording stops recording them.
As I have no experience with JS I struggle to bind the Pipe recording and the event of pressing the play button of the embedded video.
I have started using some snippets of code that I found, but it is not really what I need (as this involves a youtube video instead of an embedded video and a "click" button instead of the play button from the embedded video).
That is the code that I have right now (not really what I need):
/ Inject YouTube API script

var tag = document.createElement('script');

tag.src = "//www.youtube.com/player_api";

var firstScriptTag = document.getElementsByTagName('script')[0];

firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

// global variable for the player

var player;

// this function gets called when API is ready to use

function onYouTubePlayerAPIReady() {

  // create the global player from the specific iframe (#video)

  player = new YT.Player('video', {

    events: {

      // call this function when player is ready to use

      'onReady': onPlayerReady,

'onStateChange': onStateChange

    }

  });

}

function onPlayerReady(event) {

  // bind events

  var playButton = document.getElementById("myBtn");

  playButton.addEventListener("click", function() {

    player.playVideo();

    //PUT START RECORDING HERE

  });

}

function onStateChange(event) {

  if (event.data == YT.PlayerState.ENDED) {

    //PUT STOP RECORDING HERE

  }

}
Has anyone already done this and could help me?
Thanks a lot!