Optimizing Video Display | XM Community
Skip to main content

Hello,

I'm conducting a study in which participants will watch a 17-minute video on a 24-inch screen using Qualtrics. I want to create JavaScript code for an uploaded video (from the library) that will address the following issues:

  1. The video should appear automatically (autoplay).
  2. The video will continue to play in a loop until the experimenter clicks on the next button.
  3. The video must fit the full screen of a 24-inch monitor.

For issue 1 (and I believe also 2), I'm using this code:

 

htmlCopy code

<video autoplay loop=true style="pointer-events: none; width: 80%"> <source src="my video" type="video/mp4" /> Sorry, your browser doesn't support embedded videos. </video>

I'm encountering a problem with issue 3. I tried changing the width to 100% or 1024, but it doesn't help. I'm not sure how to solve this problem. Is it related to the code itself or perhaps the browser I'm using (Chrome)? Maybe there is a better code solution I can use?

Many Thanks :)

You can use the library Plyr.io.

Here’s an example code.

Question HTML:

<video id="myVideo" width="320" height="176" autoplay>
 <source src="https://www.w3schools.com/Tags/mov_bbb.mp4" type="video/mp4" />
 <source src="https://www.w3schools.com/Tags/mov_bbb.ogg" type="video/ogg" />
 Your browser does not support HTML5 video.
</video>
<link rel="stylesheet" href="https://cdn.plyr.io/3.7.8/plyr.css" />

 

Question JS:

Qualtrics.SurveyEngine.addOnReady(function () {
	jQuery.getScript("https://cdn.plyr.io/3.7.8/plyr.js").done(() => {
		const myVideoPlayer = new Plyr("#myVideo", {
			autoplay: true,
			hideControls: true,
			loop: { active: true }
		});
		myVideoPlayer.fullscreen.enter();
	});
});

 

Demo: https://iima.au1.qualtrics.com/jfe/preview/previewId/00a1841e-33a5-49ae-a9c5-6934da853af4/SV_8HBDY4VRJnFn40J/BL_6MgsrY07XdoL1Uq?Q_SurveyVersionID=current

 

More about the library: https://github.com/sampotts/plyr

Thank you ! :-)

Leave a Reply


Terms & Conditions