hide movenext button until video has been fully played

More
3 years 6 months ago #131445 by Andrea01
Hi,
in the answerfield I Show a Video like this:

<a href="#" onclick="$('#video').show(); $(this).hide();">Click to Play the video!</a>
<div id="video">
<video autoplay="" height="500" id="video1" src="myvideo>
</video>
</div>
<script>
$('#video').hide();
</script>

How can I hide or disable the "movenext button" until the Video has been fully played.

Thanks in advance

Andrea

Please Log in or Create an account to join the conversation.

LimeSurvey Partners
More
3 years 6 months ago #131447 by david2013
I use media element ( mediaelementjs.com/ ). It has video end event.

Please Log in or Create an account to join the conversation.

More
3 years 6 months ago #131466 by Andrea01
Thank you. Is there no other solution?

Please Log in or Create an account to join the conversation.

More
3 years 6 months ago #131468 by holch
You are basically using the HTML5 element for video, which means respondents need a browser that supports this element. How do you guarantee this?

I'm not a LimeSurvey GmbH member. I answer at the LimeSurvey forum in my spare time. No support via private message.
Some helpful links: Manual (EN) | Question Types | Workarounds

Please Log in or Create an account to join the conversation.

More
3 years 6 months ago #131498 by Andrea01
@ Holch: We show a video at the beginning of the questionnaire, asking the respondents what they see and what they hear.
They can move on to the next question only when their answers are correct.

@david2013: Thank you , I will try mediaelements.
And hopefully I can adress the movenext button with mediaelements.

I am able to adress an external button with this code.
But I did not succeed to adress the limesurvey movenext button.

<video id="myvideo" autoplay>
<source src="myvideo" type="video/mp4">
browser unterstützt dieses Format nicht.
</video>
<button id="playbtn">Weiter</button><br />

<script>
var vid = document.getElementById("myvideo");
document.getElementById('playbtn').style.visibility = 'hidden'
vid.onended = function() {
document.getElementById('playbtn').style.visibility = 'hidden'
document.getElementById('playbtn').style.visibility = 'visible'
};

best regards
Andrea

Please Log in or Create an account to join the conversation.

More
3 years 6 months ago - 3 years 6 months ago #131514 by tpartner
As Holch points out, the video element and the onended event will only work in browsers that support HTML5.

Having said that, try something like this:

<script type="text/javascript" charset="utf-8">		
	$(document).ready(function() {	
 
		// Hide the "Next" button
		$('#movenextbtn').hide();
 
		var vid = document.getElementById("myvideo");
		vid.onended = function() {
			// Show the "Next" button
			$('#movenextbtn').show();
		}
    });
</script>

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Official LimeSurvey Partner - partnersurveys.com
Last edit: 3 years 6 months ago by tpartner.

Please Log in or Create an account to join the conversation.

More
3 years 6 months ago #131522 by Andrea01
Hi Tony

thanks a lot, works perfectly :)

Andrea

Please Log in or Create an account to join the conversation.

More
3 years 6 months ago #131704 by Andrea01
Hi everybody,,

I finally have installed mediaelements.js by including the scripts in the head of my template (trf_resonsive).

But the Problem is that I can't hide the limesurey movenext button, even tough I put following code:
<script>
(document).ready(function() {
$('#movenextbtn').hide();
});
</script>

Any idea?

Thanks in advance

Andrea

</script>

Please Log in or Create an account to join the conversation.

More
3 years 6 months ago #131706 by tpartner
Do you have any JavaScript errors in the console?

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Official LimeSurvey Partner - partnersurveys.com

Please Log in or Create an account to join the conversation.

More
3 years 6 months ago #131712 by Andrea01
All Firefox says is:

TypeError: $(...).progressbar is not a function

Please Log in or Create an account to join the conversation.

More
3 years 6 months ago #131717 by tpartner
Okay, that error may be preventing any subsequent JavaScript from running so you'll have to fix it. Does the error occur without mediaelements.js?

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Official LimeSurvey Partner - partnersurveys.com

Please Log in or Create an account to join the conversation.

More
3 years 6 months ago #131721 by Andrea01
no, no Errors shown without mediaelements.js!

Please Log in or Create an account to join the conversation.

More
3 years 6 months ago #131745 by tpartner
Try jPlayer - jplayer.org/ . It also has an "ended" event - jplayer.org/latest/developer-guide/#jPlayer-event-type .

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Official LimeSurvey Partner - partnersurveys.com

Please Log in or Create an account to join the conversation.

More
3 years 6 months ago #131759 by Andrea01
Thanks, I will have a look at it during the Weekend.

Best regards
Andrea

Please Log in or Create an account to join the conversation.

More
3 years 6 months ago #131820 by david2013
hmmm.. mediaelements.js works for me. Anyway, I think jPlayer also work. Just make sure when you include js file, replace "{" with "{ " and replace "}" with " }", otherwise, limesurvey will try to parse anything between "{" and "}". Hence, it will give you error unexpected.

Please Log in or Create an account to join the conversation.

Start now!

Just create your account and start using Limesurvey today.

Register now
Join our Newsletter!