Never mind, I solved this, with help from this earlier post: https://community.qualtrics.com/XMcommunity/discussion/14377/make-vimeo-iframe-non-interactive-after-pressing-play
I had tried this earlier, but I had made a mistake, so it didn't work properly. Now that I fixed the the issue, it works wonderfully.
Of course I'm sure the way I've implemented it is clumsy. Still happy to hear if there are ways to improve.
So now I have in HTML:
And in JS:
Qualtrics.SurveyEngine.addOnload(function () {
this.hideNextButton();
this.getChoiceContainer().hide();
});
Qualtrics.SurveyEngine.addOnReady(function()
{
var my_vid = document.querySelector("myvideo");
const player = new Vimeo.Player("myvideo");
that = this;
player.on("play", function () {
my_vid.style.pointerEvents = "none";
});
player.on("ended", function () {
that.showNextButton();
});
});
This makes the embedded Vimeo video pause if you tab away or minimize the window, and makes the Next Button not show up until the video has ended.
I would like to implement this solution in a survey that uses loop and merge to display a vimeo embed on one page and a list of questions on the second, so that I have a better chance of people watching the videos instead of tabbing away or clicking to the next page early. I’m a little unsure of the implementation, though.
I used the inspector to look at the html in the last comment here to see what the html was that OP references (but isn’t visible as text because it was rendered in the post instead of being inserted as display code). It seems like there is a chunk of stuff between script tags, but when I try to pop that code into the question on my survey (either into the question html editor directly or by including it in the L&M field I’m using to populate the video player with specific videos), the script segments are stripped out. This is not unexpected to me, but I can see the code in the html of this page, it clearly was possible for this OP. I’m wondering if there’s something I’m missing about how to include script tags.
In the code of the comment above, this is in the html for the player iframe and immediately afterward:
<div id="myvideo">
<iframe> this is where the video/player iframe tag goes with all attributes </iframe>
</div>
<script src="https://player.vimeo.com/api/player.js"></script>
<br>
<script>
<br> const player = new Vimeo.Player('myvideo');<br><br>
<br> <br>document.addEventListener("visibilitychange", () => {<br> if (document.visibilityState !== 'visible') {<br> player.pause();<br> }<br>}) <br>
</script>
If I try to replicate it (along with the javascript), the next button is hidden until the scrubber reaches the end of the video and then it appears, but the ‘pause when not visible’ isn’t happening since the code script tags for that is getting stripped.
@TomG - You have replied on most of the threads about next button/video embeds that I’ve found, so thought I might tag you to see what your take on this is? Crossing my fingers that there’s something simple and obvious I have overlooked in trying to replicate this. :)
Add JS to the question using ‘Add JavaScript’
@TomG Thanks for replying so quickly! I have it working now.
-- I am curious about why the OP was able to put some of the script snippets into the html (vs the add js window) without them being stripped, but I guess I’ll live with the mystery. :)
For reference for anyone looking to do the same thing who finds this thread later (since I’ve seen this thread refernced in a couple of others from last year without final solutions)….
I did originally use the regular Add Javascript method for the code the OP stated was in the js (to hide next button and not make it reappear until video state was ‘ended’. So in the js window I had previously placed:
Qualtrics.SurveyEngine.addOnload(function () {
this.hideNextButton();
this.getChoiceContainer().hide();
});
Qualtrics.SurveyEngine.addOnReady(function()
{
var my_vid = document.querySelector("myvideo");
const player = new Vimeo.Player("myvideo");
that = this;
player.on("play", function () {
my_vid.style.pointerEvents = "none";
});
player.on("ended", function () {
that.showNextButton();
});
});
The OP had stated that they entered the code for the visibility trigger to pause the video when it wasn’t visible in the html, which is the part I was asking about re stripped tags. TomG’s response made me try adding that code into the regular js window instead of the question html.
I tried it in a few locations (addOnLoad, various positions in addOnReady) until I found one that caused the next button to still hide then appear when video ends, and added the autopause when tabbing away. The add js window now looks like this and works:
Qualtrics.SurveyEngine.addOnload(function()
{
/*Place your JavaScript here to run when the page loads*/
this.hideNextButton();
this.getChoiceContainer().hide();
});
Qualtrics.SurveyEngine.addOnReady(function()
{
/*Place your JavaScript here to run when the page is fully displayed*/
var my_vid = document.querySelector("myvideo");
const player = new Vimeo.Player("myvideo");
that = this;
document.addEventListener("visibilitychange", () => {
if (document.visibilityState !== 'visible') {
player.pause();
}
});
player.on("play", function () {
my_vid.style.pointerEvents = "none";
});
player.on("ended", function () {
that.showNextButton();
});
});
Qualtrics.SurveyEngine.addOnUnload(function()
{
/*Place your JavaScript here to run when the page is unloaded*/
});
Before adding that, the hiding of the next button was working as expected.
When this was added to OnLoad, the next button continued to hide until the end of the video as expected, but the ‘pause when not visible’ didn’t happen -- tabbing away or into another window didn’t do anything.
When this was added to OnReady above the code already in that section, the pause still didn’t work, but then the next button never appeared after the video ended.
Thanks @kg2472a for the original post and self-correction, and thanks again, @TomG!
