I have a survey wherein I want to create a feeling of thought disruption by showing a video. The videos are directly uploaded on Qualtrics. I have used this thread to enable autoplay and removal of controls.
Further to that, the videos I am going to show randomly, vary in time (6, 15, 30, 60 seconds). I want to use auto-advance feature after the video. So, once a respondent has seen the video, the page moves forward automatically. I have tried the following two posts and the auto advance does not work.
I have also tried the auto advance function through ‘Look and feel’ area but as the video is within a text/graphics question, the auto advance does not work and ‘next’ buttong is still shown.
I am not very good at code, as you can imagine, so, please help!
Best answer by ps2008
Ok. I found the solution myself and here is the code. First, I had to change this iframe code to video tag code. Muted can be kept or removed depending on your preference.
<video id="fashion6" width="800" height="450" autoplay="" muted =”” playsinline="" style="pointer-events: none;" oncontextmenu="return false;" disablepictureinpicture=""> <source src="URL HERE" type="video/mp4"> Your browser does not support the video tag. </video>
Then add following javascript.
Qualtrics.SurveyEngine.addOnload(function() { // Hide the Next button initially var nextButton = this; nextButton.hideNextButton();
// Get the video element var video = document.getElementById("fashion6");
// Ensure the video plays automatically if (video) { video.play();
// Listen for the video to end video.addEventListener('ended', function() { // Show the Next button after the video has ended setTimeout(function() { nextButton.showNextButton(); }, 500); // Adding a slight delay to ensure proper execution }); } });
Ok. I found the solution myself and here is the code. First, I had to change this iframe code to video tag code. Muted can be kept or removed depending on your preference.
<video id="fashion6" width="800" height="450" autoplay="" muted =”” playsinline="" style="pointer-events: none;" oncontextmenu="return false;" disablepictureinpicture=""> <source src="URL HERE" type="video/mp4"> Your browser does not support the video tag. </video>
Then add following javascript.
Qualtrics.SurveyEngine.addOnload(function() { // Hide the Next button initially var nextButton = this; nextButton.hideNextButton();
// Get the video element var video = document.getElementById("fashion6");
// Ensure the video plays automatically if (video) { video.play();
// Listen for the video to end video.addEventListener('ended', function() { // Show the Next button after the video has ended setTimeout(function() { nextButton.showNextButton(); }, 500); // Adding a slight delay to ensure proper execution }); } });
