I’m trying to embed a video in my Qualtrics survey. To ensure that the participants will watch the whole video, I want the video only to start after the participants have clicked on the video, and the “next” button to appear after the video has ended.

After applying my code, everything works except that the “next” button does not appear.

Below is my HTML code and my JavaScript.

<video class="qmedia" id="Begleitvideo_01" controls="true" height="600" preload="auto" width="1000"><source src="https://baselpsychology.eu.qualtrics.com/CP/File.php?F=F_2bnL6eDk8pCHIEu" type="video/mp4"><embed align="middle" autoplay="false" bgcolor="white" class="qmedia" controller="true" height="600" pluginspage="http://www.apple.com/quicktime/download/" src="https://baselpsychology.eu.qualtrics.com/CP/File.php?F=F_2bnL6eDk8pCHIEu" type="video/quicktime" width="1000"></video>

Qualtrics.SurveyEngine.addOnload(function()
{
    /*Hide NextButton*/
    this.hideNextButton();
    
    var startButton = document.getElementById('startButton');
    var video = document.getElementById('Begleitvideo_01');

    // Hide the start button and play the video when it's clicked
    startButton.addEventListener('click', function() {
      video.play();
      startButton.style.display = 'none'; // Hide the button
    });
    
    
    video.addEventListener("ended", function() {
        this.showNextButton();
      });

    // Prevent right-click context menu
    document.addEventListener("contextmenu", function(e) {
      e.preventDefault();
    });

});

Qualtrics.SurveyEngine.addOnReady(function()
{
    
});

Qualtrics.SurveyEngine.addOnUnload(function()
{

});