Welcome to the LimeSurvey Community Forum

Ask the community, share ideas, and connect with other LimeSurvey users!

hide movenext button until video has been fully played

  • Andrea01
  • Andrea01's Avatar Topic Author
  • Offline
  • Senior Member
  • Senior Member
More
8 years 2 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
The topic has been locked.
More
8 years 2 months ago #131447 by david2013
I use media element ( mediaelementjs.com/ ). It has video end event.
The topic has been locked.
  • Andrea01
  • Andrea01's Avatar Topic Author
  • Offline
  • Senior Member
  • Senior Member
More
8 years 2 months ago #131466 by Andrea01
Thank you. Is there no other solution?
The topic has been locked.
  • holch
  • holch's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
8 years 2 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 answer at the LimeSurvey forum in my spare time, I'm not a LimeSurvey GmbH employee.
No support via private message.

The topic has been locked.
  • Andrea01
  • Andrea01's Avatar Topic Author
  • Offline
  • Senior Member
  • Senior Member
More
8 years 2 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
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
8 years 2 months ago - 8 years 2 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:

Code:
<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.
Last edit: 8 years 2 months ago by tpartner.
The topic has been locked.
  • Andrea01
  • Andrea01's Avatar Topic Author
  • Offline
  • Senior Member
  • Senior Member
More
8 years 2 months ago #131522 by Andrea01
Hi Tony

thanks a lot, works perfectly :)

Andrea
The topic has been locked.
  • Andrea01
  • Andrea01's Avatar Topic Author
  • Offline
  • Senior Member
  • Senior Member
More
8 years 2 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>
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
8 years 2 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.
The topic has been locked.
  • Andrea01
  • Andrea01's Avatar Topic Author
  • Offline
  • Senior Member
  • Senior Member
More
8 years 2 months ago #131712 by Andrea01
All Firefox says is:

TypeError: $(...).progressbar is not a function
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
8 years 2 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.
The topic has been locked.
  • Andrea01
  • Andrea01's Avatar Topic Author
  • Offline
  • Senior Member
  • Senior Member
More
8 years 2 months ago #131721 by Andrea01
no, no Errors shown without mediaelements.js!
The topic has been locked.

Lime-years ahead

Online-surveys for every purse and purpose