I need to record how long an embedded Vimeo video has been played on each video of a loop and merge (one video per loop). I’m currently using the regular timing question for this purpose, but it’s not doing what I need, so I’m hoping to get some help to come up with a different solution using custom js. The reason is because if a participant doesn’t watch the full videos before answering the follow-up questions, I have to discard their data and they are not eligible for the incentive.

Current setup:

• Loop and merge block is split into two pages.
• First page has timing question and a text/graphic question that displays the video from Vimeo using the emebedded player link stored in the loop and merge table. 
• Second page has a timing question and all the follow up questions about the video. 
  • At the top of the second page I have some custom js on a hidden question that records js-generated data about randomizing the order of questions (this code, from my question last year)
• To determine if someone “watched” a video, I check the timing question’s Page Submit in seconds to see how long they were on the video page. Currently I can tell if they left too soon and discard their data for that video, but if they left the video page open long enough, I have no way to tell if they actually watched the video. For example, someone could open the page, tab away to do something else and come back a minute later and click Continue, then just click through the follow-up questions without having watched the video. When I set things up this way, I expected that the First Click would be when they clicked play on the video, not realizing that timing questions don’t record clicks in the player. 

I think I need to use the Vimeo API to grab the info from the player itself and then record it into Qualtrics. Ideally I’ll get how long the video was actually played (vs. checking for “ended” status, which can be tricked by someone dragging the playback scrubber to the end). I’ve tried to find a relevant solution in existing threads but haven’t been able to find advice, and it is not possible for me to upload the videos directly into Qualtrics because the files are way too big, so to custom js I go!

It looks like the playback info can be grabbed using js to listen for events using the Vimeo API/player SDK, but I’m less sure of how to to record the data points into my Qualtrics dataset once they’re obtained. I don’t want to use embedded data, because there are several hundred videos across the conditions, and I really would like the playback time to be a single variable in one data column per loop rather than 300 individual columns with. I’m wondering if it might be possible to hijack the timing question on the video loop page and replace a couple of the currently recorded times with times from the Vimeo event. Or if that’s not possible, to add a hidden text entry question or two in the loop to input the event data as a text answer. 

It looks like the play event for the playback controls would work best to capture the info I need. The event fires when the video is played and the event data includes:

Note: the ended event records the same three pieces of data, but since it fires when playback reaches the end of the video, it seems like that wouldn’t work as well as play to capture the data for people who press play and then click Continue after a few seconds instead of letting the video play all the way.

I’ve spent a few hours trying different things but I just don’t know enough to figure it out on my own. Here’s how I think I could set it up.

In the HTML of the text/graphic question (first page in the loop and merge block) holding the embedded player I would add:

<script src="https://player.vimeo.com/api/player.js"></script>

In the custom js window on the same question I would add this code (from Vimeo reference) and put it in the addOnload section:

var onPlay = function(data) {
  console.log(data.duration);
  console.log(data.percent);
  console.log(data.seconds);
};
player.on('play', onPlay);

 Now I need to save those elements into my dataset for each loop and I’m not sure how to do so. (I spent time experimenting with setEmbeddedData before realizing the hundreds of data columns issue.)

Option A: Hijack timing question field

If I could hijack the timing question I would replace the default First Click and Last Click with the percent and seconds from the vimeo play event data. I can’t find any information on how to do this, though. The closest thread I could find was this one about modifying the timing question using a txt import. The answer said the timing question isn’t supported by txt import. This isn’t the same thing and the type of data would be the same (seconds in numerals), so I’m wondering if it might be possible? In that case I would expect to move the timing question to after the video question instead of before, and add js on the timing question to grab the data from the previous question’s console.logs. No idea if this idea is even remotely doable. 

Option B: Write to hidden text question input 

I’m thinking I could use something similar to the code I linked to from last year that wrote some js results into a hidden text entry question. I’m not clear on if I can only access those logged elements (duration, percent, seconds) from within the same js block on that question, or if I could do so from js on a hidden question placed immediately after it. If it can be accessed by the next question, I would create a hidden text entry question and  write the value of ‘seconds’ into the text entry box. My starting point code would be this (I’m super unsure about this):

jQuery( this.questionContainer ).find('input').val( data.seconds);

Or if the data can’t be accessed from a follow-up question, maybe I could turn my text/graphic question that holds the video player into a text entry question and use js to hide the actual text box?

Option C: Something else, potentially using embedded data but without requiring hundreds of different variables?

Any and all suggestions, advice, and points on a direction to look greatly appreciated.