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!
How to hide the next button until a video embedded from Google Drive is finished?
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!
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
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.