hide next button until video finished

[Lukas von Flüe]

Hi all,

my subjects will see several videos. I save them in a folder called "static". I want to prevent the subjects from proceeding to a next page before they have clicked to start the video and the whole video has played.

Can I somehow hide the next button until subjects have clicked the video and the video has finished? If so, how? Or is there a better solution?

Below the code of the template page where I include the video:

Thanks in advance for your help.

Cheers,

Lukas 

[Chris @ oTree]

You can hide it with javascript. Take a look at javascript tutorials on how to show and hide elements on a page. 

Sent from my phone

On Jan 29, 2021, at 4:33 AM, Lukas von Flüe <lukass....@gmail.com> wrote:

Hi all,

my subjects will see several videos. I save them in a folder called "static". I want to prevent the subjects from proceeding to a next page before they have clicked to start the video and the whole video has played.

Can I somehow hide the next button until subjects have clicked the video and the video has finished? If so, how? Or is there a better solution?

Below the code of the template page where I include the video:

<Screen Shot 2021-01-28 at 21.32.05.png>

Thanks in advance for your help.

Cheers,

Lukas 

--
You received this message because you are subscribed to the Google Groups "oTree help & discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email to otree+un...@googlegroups.com.
To view this discussion on the web, visit https://groups.google.com/d/msgid/otree/1e6f7796-50d7-4161-996e-b0080e0d7704n%40googlegroups.com.

<Screen Shot 2021-01-28 at 21.32.05.png>

<film_code.txt>

[Chris @ oTree]

as for detecting the video state, you can use JavaScript also. Look on this page: 

https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/ended_event

also here:

https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement

[Lukas von Flüe]

Hi Chris,

thanks for the quick reply. I will try that.

Cheers

[Lukas von Flüe]

Hi all,

just in case someone else might be interested in the solution to my original question, below is a code that works.

As indicated by Chris, one way is to add an "EventListener" in Java and then set the visibility of the nextbutton to "hidden":

Cheers,

Lukas

[Aiste Petkeviciute]

Hello everyone,

I have tried to apply Lukas' solution but it does not seem to work for me.. I attach the screenshot.

If someone could help me, it would be great!

Best regards,
Aiste

[Chris @ oTree]

Try using your browser’s javascript console to check for errors and use console.log to see if your code is executing as you expect. 

Sent from my phone

On Apr 15, 2021, at 12:11 AM, Aiste Petkeviciute <aist....@gmail.com> wrote:

Hello everyone,

To view this discussion on the web, visit https://groups.google.com/d/msgid/otree/3e796c7d-b120-4bd2-9b41-9ffe9be27904n%40googlegroups.com.

<Screenshot (70).png>

[Nicole Voss]

Aiste, were you able to figure out how to make this work with an iFrame video? I'm thinking that is your issue. Is there a solution to this or an alternative?