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