Welcome to the LimeSurvey Community Forum

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

Automatic redirection to the next question after video playing

  • Csurvey
  • Csurvey's Avatar Topic Author
  • Offline
  • Senior Member
  • Senior Member
More
7 years 4 months ago #143800 by Csurvey
Hello everybody,

I would like to display a video in a question :
- auto-playing once the page is loaded or the user has to click the play button to watch
and once the video has been played, there is a forced redirection to the next question;
because for a test, i want that my user see the video just once.

Could you help me with that ?

Many thanks,

Best,
Chris
The topic has been locked.
More
7 years 4 months ago - 7 years 4 months ago #143804 by urbana
Two ways, depending on the way you embedded your video.
First, with HTML 5 there is callback you can use:
Code:
<video src="video.ogv" id="myVideo">
  video not supported
</video>
 
<script type='text/javascript'>
    document.getElementById('myVideo').addEventListener('ended',myHandler,false);
    function myHandler(e) {
        // What you want to do after the event
    }
</script>
Solution is from here:
stackoverflow.com/questions/2741493/dete...html5-video-finishes

2nd (not so fine way) :)
You can display the video or the layer of the video via javascript and start a timer with setTimout. After the length of the video + puffer you could do your action. We will work in 90 % of the cases but is not 100 % save.

Either way after the video ended you can set the container of the video to display:none and the following question to visible via JS

all the best, urban-a :)
Last edit: 7 years 4 months ago by urbana.
The topic has been locked.
  • Csurvey
  • Csurvey's Avatar Topic Author
  • Offline
  • Senior Member
  • Senior Member
More
7 years 4 months ago #143812 by Csurvey
Dear Urbana,
many thanks for your help.

How to proceed if i only want the video been displayed in a frame (without controls) automatically ?

could you help me for the JS regarding the second part (redirecting) ?

Many thanks,
Best,
Chris
The topic has been locked.
More
7 years 4 months ago - 7 years 4 months ago #143819 by urbana
Mh a frame makes it harder...
When the frame is loaded, starts the video then automatically?

If yes you could do something like that:
Code:
$( document ).ready(function() {
    $("#iframeID").attr("src","URL to Video"); //when the page is loaded then you add the source to the iframe
    $("#iframeID").css({"display":"visible"}); //show the video frame
    $("#questionID").css({"display":"none"}); //don't show the question or questions on this page
    setTimeout(function(){ 
      $("#iframeID").css({"display":"none"}); //hide the video frame
      $("#questionID").css({"display":"visible"}); //show the question or questions
    }, 3000); //set in miliseconds the time according to the length of the video
});

I would recommend you to show the first questions to the video or all the question on the same page. then you don't have to handle the redirection.

But as you can see in the code when the page is loaded you hide the questions and show the video after a certain time you hide the video and show the questions.

All depends on the fact that the video starts automatically when the frame is loaded
Last edit: 7 years 4 months ago by urbana.
The topic has been locked.
More
7 years 4 months ago #143820 by urbana
It is important that you don't fill the src attribute with anything when you edit the question.

So when you edit the question add the iframe in this way:
Code:
<iframe src="" width height etc.></iframe>
The topic has been locked.
  • Csurvey
  • Csurvey's Avatar Topic Author
  • Offline
  • Senior Member
  • Senior Member
More
7 years 2 months ago #146547 by Csurvey
Dear Urbana,
i am very sorry not having replied to your last answer.
Many thanks for all your help. I have been off this issue for a while and just going back to that work.

I am just trying to translate this on LS 2.57.1+161205 and am a little bit confused by the new interface and possibilities.

I think i was unclear in my precedent request :

I have a question with a video located in the upload directory.
I have created a "text question" and just filled the file from this video on the server. So when in preview the question i have the video window displaying the first frame paused (and i have the control : play, sound...) in the question page.

I would like that when the people access this question, after clicking next from the precedent question, that the video file load and then automatically play (perhaps after a little delay like 5 seconds, after loading in order to avoid browser problem), and that the control would not be apparent just the video frame and that there would a redirection to the next question wich is a radio button fashion for assessing the video.

The way you presented with loading autoplaying the video at first and then hiding it and displaying the question on the same page with radio button would be great ok.

The problem is i do not know exactly how to start with a javascript to
disable video control, autoplay, and then i could use your script to hide the video browser and after display the next question on the same page.

Could you help me again ?

Many thanks.

best regards.

Chris
The topic has been locked.

Lime-years ahead

Online-surveys for every purse and purpose