How to hide the next button until a video embedded from Google Drive is finished? | XM Community
Skip to main content
I'm trying to use mp4 videos in my survey and have encountered some problems -

I first tried to add them to the library (and had a great help in: https://www.qualtrics.com/community/discussion/6852/how-to-show-next-button-only-after-a-video-inserted-as-media-file-is-finished-playing). Then I realized that some of my videos are too big and Qualtrics allows for 16mb files only, so I decided to embed them from my Google Drive.

However - I do not know how to solve the problem now - I want the next button to be hidden until the video finished playing. I'm not sure what is the player used by Google Drive - it seems very similar to YouTube but I can't tell. Moreover, when I tried to solution suggested in: https://www.qualtrics.com/community/discussion/1186/using-iframe-api-to-automatically-advance-to-next-page-after-a-video-has-been-watched nothing happened....

Any adice on how to do it with Google Drive, or any other way to include big video files on a survey (that does not involve uploading them to YouTube) would be very much appreciated!
Have you tried adding a Timer question before the video in the survey, and setting "Enable submit after" to the number of seconds that the video lasts?
Thanks @fstram , eventually I did it with dropbox, as following:

html code (I removed the brackets before video, source):

video controls="" height="720" id="video1" width="1280"> source src="https://www.dropbox.com/s/skkarl0yn55e0sf/xxxxxxxxxxxxxx-Untitled%20Project.mp4?raw=1" type="video/mp4"></video



and then JS code:

Qualtrics.SurveyEngine.addOnReady(function() {

var qobj = this;

qobj.hideNextButton();

qobj.hidePreviousButton();

});



Qualtrics.SurveyEngine.addOnload(function() {

that = this;

document.getElementById('video1').addEventListener('ended',myHandler,false);

function myHandler(e) {

if(!e) {

e = window.event;

}

that.showNextButton();

}

});





It worked perfectly!

This works too - 

 

Qualtrics.SurveyEngine.addOnReady(function() {
    var qobj = this;
    qobj.hideNextButton(); // Hide the Next button initially

    // Get the video element
    var video = document.getElementById('myVideo');

    // Variable to track whether the video was played completely
    var videoPlayedToEnd = false;

    // Disable video controls
    video.controls = false;

    // Enable autoplay
    video.autoplay = true;

    // Add event listeners to handle video events
    video.addEventListener('ended', function() {
        // When the video ends, set the flag to true
        videoPlayedToEnd = true;
        // Show the Next button if the video was played properly
        if (videoPlayedToEnd) {
            qobj.showNextButton();
        }
    }, false);

    // Check if autoplay is supported by the browser
    var autoplaySupported = video.autoplay === true || video.hasOwnProperty('playsInline');

    // If autoplay is not supported, show a warning
    if (!autoplaySupported) {
        console.warn('Autoplay is not supported in this browser. Please click the play button to start the video.');
    }
});
 


Leave a Reply