Use the ended event.

---

Thanks @TomG ! Could you please help me a bit further with the code?

I don't have an experience with coding in either HTML or JavaScript (I do have a lot of experience in coding in general, but mainly r and python.......) so when it comes to HTML or JS I'm probaly doing some very basic mistakes...

I didn't manage to insert the ended code to my question html - everytime I added it there it was deleted for some reason (maybe not in the proper html format?). When I tried to add JS code that I found to the JS section of the question - nothing happened....

(that's the code that I added: $("#myVideo").bind("ended", function() {

this.showNextButton();

});



I tried many options of adding html code to the question (from many examples that I found in the internet) but none worked.....

If you could post here the code that I need to write and indicate where I need to paste it it would be super helpful!!!!



Thanks a lot! I truly appreciate any help here!

---

Add JS by clicking the cog on the left of the question and select Add JavaScript.



```

Qualtrics.SurveyEngine.addOnReady(function() {

var qobj = this;

qobj.hideNextButton();

jQuery("#myVideo").on("ended", function() { qobj.showNextButton() });

});

```

---

Thanks @TomG ! I tried that but it still doesn't work....

Currently, my question's html looks like this (see attached pic).!







And the question's JS code looks like this:

Qualtrics.SurveyEngine.addOnReady(function() {

var qobj = this;

qobj.hideNextButton();

jQuery("#myVideo3").on("ended", function() { qobj.showNextButton() });

});



What am I missing here?

I have a branch logic so actually there are 2 questions with videos, but only one is displayed each time. I gave each question's video a different ID (myVideo2 or myVideo3) and the question's corresponding JS code refers to the specific video ID,accordingly.....

Any idea what is wrong with this configuration?



Many thanks!

---

Additional comment - I'm still trying to solve this... Would appreciate your opinion @TomG



I noticed that when I select "inspect" on the embeded video (in the real survey link), and then I choose the video.qmedia, the id field there is empty (""). I DO see all the video html code under the "innerHTML" field..... But the video is indeed not recognized... What should I do now?

Thanks!!

---

Your html is wrong. The id "myVideo3" should be on the video tag.

---

Thanks a lot! i didn't notice that's a different tag!!! I really appreciate your help @TomG

---

Hey @TomG ,

I'd appreciate it if you could have a look in a related problem that I have with inserting videos. See: https://www.qualtrics.com/community/discussion/6958/how-to-hide-the-next-button-until-a-video-embedded-from-google-drive-is-finished/p1?new=1

---

@yinbar would you mind posting the final html and JS code that you got to work? It would be nice to implement something similar in my case and I'm also having a little trouble! (I'm also a Python/R person)

---

> @yinbar said:

> Hey @TomG ,

> I'd appreciate it if you could have a look in a related problem that I have with inserting videos. See: https://www.qualtrics.com/community/discussion/6958/how-to-hide-the-next-button-until-a-video-embedded-from-google-drive-is-finished/p1?new=1



Assuming you are are using an iframe for the Google Drive video, you would have to use a Google Drive API to control it. Unfortunately, since Google Drive isn't really intended for videos, I don't think the API has any video control features.

---

@jbdolg Sure - here it is:

The question html code (I removed the brackets before video, source and embed):

video class="qmedia" controls="true" height="720" id="myVideo2" preload="auto" width="1280"> source src="https://cmu.ca1.qualtrics.com/CP/File.php?F=F_xxxxxxxxxx" type="video/mp4" /> embed align="middle" autoplay="false" bgcolor="white" class="qmedia" controller="true" height="720" width="1280"></embed></video



And then in the JS of the question:

Qualtrics.SurveyEngine.addOnReady(function() {

var qobj = this;

qobj.hideNextButton();

jQuery("#myVideo2").on("ended", function() { qobj.showNextButton() });

});





@TomG

Thanks! I took a different direction evebtually - used the video from dropbox, without using any designated API:

html code:

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!

I'll update the other comment, too.

---

@yinbar thank you!

---

https://community.qualtrics.com/XMcommunity/discussion/comment/19309#Comment_19309Hey Tom, thanks for helping the community. Unfortunately I'm having the same problem with a youtube video. I can't find the video id/tag. I'd really appreciate your help.
thanks

---

https://community.qualtrics.com/XMcommunity/discussion/comment/43272#Comment_43272YouTube is completely different. See this.

---

hi, 

I have a survey which asks respondents to view a video in entirety before proceeding to answer questions on the next page. I would like to hide the next button until the video is finished playing. Of note, I specifically don’t want to use a timer to hide the next button in case someone chooses to watch the video on a higher watch speed (e.g., 1.5x, 2x).

my issue seems to be with using iFrame as the code I’ve found is written for other embedded video formats.

Does anyone have any experience with using JS with iFrame videos in Qualtrics? Thank you!!

 

This is the code I have tried but it didn't work. 

<div style="text-align: left;">
    <span style="font-size: 19px;">
      <strong>Play Video</strong>
    </span>
    <br />
    &nbsp;
  </div>

  <div style="text-align: center;">
    <iframe
      id="video-player"
      src="VIDEO-SRC LINK" //video is hosted on canvas
      width="560"
      height="320"
    ></iframe>
  </div>

Qualtrics.SurveyEngine.addOnload(function() {
    this.hideNextButton();
  });



  Qualtrics.SurveyEngine.addOnReady(function() {
    var iframe = document.getElementById("video-player");
    var that = this;



    iframe.addEventListener("load", function() {
      var videoPlayer = iframe.contentWindow.document.querySelector("video");



      videoPlayer.addEventListener("ended", function() {
        that.showNextButton();
      });



      videoPlayer.addEventListener("timeupdate", function() {
        if (isVideoNearEnd(videoPlayer)) {
          videoPlayer.pause();
          that.showNextButton();
        }
      });
    });



    function isVideoNearEnd(player) {
      var currentTime = player.currentTime;
      var duration = player.duration;
      var threshold = 1.5; // Adjust this threshold as needed



      return currentTime >= duration - threshold;
    }
  });

 

---