Disabling playback speed, rewatch control, and skipping video

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;
	};
});