Disabling playback speed, rewatch control, and skipping video | XM Community
Skip to main content

Hello everyone,

I'm designing an experiment where participants will watch a video and then answer related questions. To ensure accurate results, I need to disable the following video controls:

  • Playback speed adjustment
  • Rewatching (seeking backward)
  • Skipping forward

Can anyone suggest how to achieve this?

Thanks in advance!

Make sure the video element doesn’t have controls tag in it. Also, add the style tag of pointer-events:none to disable any clicks on the video.

Then add two buttons for playing and pausing.

Your html will be something like this:

<video id="myVideo" width="320" height="176" style="pointer-events: none">
<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>
<div class="videoControls">
<button id="playVideo">Play</button>
<button id="pauseVideo">Pause</button>
</div>

 

To get the buttons to play/pause the video using this JS:

Qualtrics.SurveyEngine.addOnReady(function () {
const quest = this;
const qc = quest.questionContainer;
const video = qc.querySelector("#myVideo");
const playButton = qc.querySelector("#playVideo");
const pauseButton = qc.querySelector("#pauseVideo");

// This will play the video
playButton.onclick = () => {
video.play();
playButton.disabled = true;
};

// This will enable the playbutton once the video has ended
video.onended = () => {
playButton.disabled = false;
};

// This will pause the video
pauseButton.onclick = () => {
video.pause();
playButton.disabled = false;
};
});

 


Leave a Reply