Synchronize pipe video recorder and embedded videos

VivViv Community Member Qubie ✭
edited May 9 in Custom Code

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!

Answers

  • rondevrondev Community Member - Trial User Wizard ✭✭✭✭✭
    edited May 5

    Use video tag to input your video in question and then on 'play' and 'end' event of video tag trigger the click event of the pipe audio play and pause button. (Make sure you hide the pipe audio preview container)

  • VivViv Community Member Qubie ✭

    Thank you for your help. I am still not sure how to realize it (I am not a programmer at all). However I tried to follow your suggestion.

    I inserted this code in the HTML view . I could realize to get alert messages when the video starts and when it ends, but the event "play" does not trigger the pipe recorder to start recording. Might that be because I do not have access to the recorder object?

    ```
    <html> 
    <body> 
    
    
        <video id="myVideo" controls="controls" height="550" preload="auto" width="1000">
              <source src="https://b.qualtrics.com/CP/File.php?F=Fxq2keNvf" type="video/mp4">
        <source src="mov_bbb.ogg" type="video/ogg">
        Your browser does not support HTML5 video.
        </video>
    
    
    </body>
    <script type='text/javascript'>
    
    
        document.getElementById('myVideo').addEventListener('play', function(e) {
    
    
             //document.getElementById("myVideo").onclick = function (){
             document.VideoRecorder.record();
             //alert('Video started');
             //}
    
    
        })
        document.getElementById('myVideo').addEventListener('ended', function(e) {
    
    
            //alert('Video ended');
            document.VideoRecorder.stopVideo();
    
    
        })
    
    
    </script>
    </html>
    

    On their webpage I found this documentation:

    https://addpipe.com/docs#desktop-recording-v2


    and

    How can I bind the event of pressing the play button of the embedded video with the start of recording / play button of the recorder?

    Thank you!

Sign In to Comment