Welcome to the LimeSurvey Community Forum

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

Short Audio Clips for Surveys - Hosting/Streaming Advice

  • LouisGac
  • LouisGac's Avatar
  • Visitor
  • Visitor
7 years 3 months ago #147143 by LouisGac
Thank you Tony for the great work!

In LS3, it will be very easy for you to share those workarounds as new "question template" ;-)
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
7 years 3 months ago - 7 years 3 months ago #147152 by tpartner

In LS3, it will be very easy for you to share those workarounds as new "question template"

Yep, looking forward to it and other 3.x features. :)

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Last edit: 7 years 3 months ago by tpartner.
The topic has been locked.
More
7 years 3 months ago #147164 by Csurvey
I understand you can not help without seeing in action; i just can not send the survey on a server for now and try to devellop locally.

I noticed errors during importation of the template :

File: scripts/jPlayer-2.9.2/.gitignore
File: scripts/jPlayer-2.9.2/.jamignore
File: scripts/jPlayer-2.9.2/dist/add-on/jplayer.playlist.js
File: scripts/jPlayer-2.9.2/dist/add-on/jplayer.playlist.min.js
File: scripts/jPlayer-2.9.2/dist/add-on/jquery.jplayer.inspector.js
File: scripts/jPlayer-2.9.2/dist/add-on/jquery.jplayer.inspector.min.js
File: scripts/jPlayer-2.9.2/dist/jplayer/jquery.jplayer.js
File: scripts/jPlayer-2.9.2/dist/jplayer/jquery.jplayer.min.js
File: scripts/jPlayer-2.9.2/dist/jplayer/jquery.jplayer.swf
File: scripts/jPlayer-2.9.2/dist/popcorn/popcorn.jplayer.js
File: scripts/jPlayer-2.9.2/dist/popcorn/popcorn.jplayer.min.js
File: scripts/jPlayer-2.9.2/dist/skin/blue.monday/css/jplayer.blue.monday.css
File: scripts/jPlayer-2.9.2/dist/skin/blue.monday/css/jplayer.blue.monday.min.css
File: scripts/jPlayer-2.9.2/dist/skin/blue.monday/image/jplayer.blue.monday.jpg
File: scripts/jPlayer-2.9.2/dist/skin/blue.monday/image/jplayer.blue.monday.seeking.gif
File: scripts/jPlayer-2.9.2/dist/skin/blue.monday/image/jplayer.blue.monday.video.play.png
File: scripts/jPlayer-2.9.2/dist/skin/blue.monday/mustache/jplayer.blue.monday.audio.playlist.html
File: scripts/jPlayer-2.9.2/dist/skin/blue.monday/mustache/jplayer.blue.monday.audio.single.html
File: scripts/jPlayer-2.9.2/dist/skin/blue.monday/mustache/jplayer.blue.monday.audio.stream.html
File: scripts/jPlayer-2.9.2/dist/skin/blue.monday/mustache/jplayer.blue.monday.video.playlist.html
File: scripts/jPlayer-2.9.2/dist/skin/blue.monday/mustache/jplayer.blue.monday.video.single.html
File: scripts/jPlayer-2.9.2/dist/skin/pink.flag/css/jplayer.pink.flag.css
File: scripts/jPlayer-2.9.2/dist/skin/pink.flag/css/jplayer.pink.flag.min.css
File: scripts/jPlayer-2.9.2/dist/skin/pink.flag/image/jplayer.pink.flag.jpg
File: scripts/jPlayer-2.9.2/dist/skin/pink.flag/image/jplayer.pink.flag.seeking.gif
File: scripts/jPlayer-2.9.2/dist/skin/pink.flag/image/jplayer.pink.flag.video.play.png
File: scripts/jPlayer-2.9.2/dist/skin/pink.flag/mustache/jplayer.pink.flag.audio.playlist.html
File: scripts/jPlayer-2.9.2/dist/skin/pink.flag/mustache/jplayer.pink.flag.audio.single.html
File: scripts/jPlayer-2.9.2/dist/skin/pink.flag/mustache/jplayer.pink.flag.audio.stream.html
File: scripts/jPlayer-2.9.2/dist/skin/pink.flag/mustache/jplayer.pink.flag.video.playlist.html
File: scripts/jPlayer-2.9.2/dist/skin/pink.flag/mustache/jplayer.pink.flag.video.single.html
File: scripts/jPlayer-2.9.2/src/actionscript/happyworm/jPlayer/ConnectManager.as
File: scripts/jPlayer-2.9.2/src/actionscript/happyworm/jPlayer/JplayerEvent.as
File: scripts/jPlayer-2.9.2/src/actionscript/happyworm/jPlayer/JplayerMp3.as
File: scripts/jPlayer-2.9.2/src/actionscript/happyworm/jPlayer/JplayerMp4.as
File: scripts/jPlayer-2.9.2/src/actionscript/happyworm/jPlayer/JplayerRtmp.as
File: scripts/jPlayer-2.9.2/src/actionscript/happyworm/jPlayer/JplayerStatus.as
File: scripts/jPlayer-2.9.2/src/actionscript/Jplayer.as
File: scripts/jPlayer-2.9.2/src/javascript/add-on/.jshintrc
File: scripts/jPlayer-2.9.2/src/javascript/add-on/jplayer.playlist.js
File: scripts/jPlayer-2.9.2/src/javascript/add-on/jquery.jplayer.inspector.js
File: scripts/jPlayer-2.9.2/src/javascript/jplayer/.jshintrc
File: scripts/jPlayer-2.9.2/src/javascript/jplayer/jquery.jplayer.js
File: scripts/jPlayer-2.9.2/src/javascript/popcorn/.jshintrc
File: scripts/jPlayer-2.9.2/src/javascript/popcorn/popcorn.jplayer.js
File: scripts/jPlayer-2.9.2/src/skin/blue.monday/image/jplayer.blue.monday.jpg
File: scripts/jPlayer-2.9.2/src/skin/blue.monday/image/jplayer.blue.monday.seeking.gif
File: scripts/jPlayer-2.9.2/src/skin/blue.monday/image/jplayer.blue.monday.video.play.png
File: scripts/jPlayer-2.9.2/src/skin/blue.monday/mustache/jplayer.blue.monday.audio.playlist.html
File: scripts/jPlayer-2.9.2/src/skin/blue.monday/mustache/jplayer.blue.monday.audio.single.html
File: scripts/jPlayer-2.9.2/src/skin/blue.monday/mustache/jplayer.blue.monday.audio.stream.html
File: scripts/jPlayer-2.9.2/src/skin/blue.monday/mustache/jplayer.blue.monday.video.playlist.html
File: scripts/jPlayer-2.9.2/src/skin/blue.monday/mustache/jplayer.blue.monday.video.single.html
File: scripts/jPlayer-2.9.2/src/skin/blue.monday/scss/jplayer.blue.monday.scss
File: scripts/jPlayer-2.9.2/src/skin/pink.flag/image/jplayer.pink.flag.jpg
File: scripts/jPlayer-2.9.2/src/skin/pink.flag/image/jplayer.pink.flag.seeking.gif
File: scripts/jPlayer-2.9.2/src/skin/pink.flag/image/jplayer.pink.flag.video.play.png
File: scripts/jPlayer-2.9.2/src/skin/pink.flag/mustache/jplayer.pink.flag.audio.playlist.html
File: scripts/jPlayer-2.9.2/src/skin/pink.flag/mustache/jplayer.pink.flag.audio.single.html
File: scripts/jPlayer-2.9.2/src/skin/pink.flag/mustache/jplayer.pink.flag.audio.stream.html
File: scripts/jPlayer-2.9.2/src/skin/pink.flag/mustache/jplayer.pink.flag.video.playlist.html
File: scripts/jPlayer-2.9.2/src/skin/pink.flag/mustache/jplayer.pink.flag.video.single.html
File: scripts/jPlayer-2.9.2/src/skin/pink.flag/scss/jplayer.pink.flag.scss

Support this project: Donate to LimeSurvey

I tried to install on another computer with windows and firefox using Mamp, but have the same issue.

Could it be related to the use of Mamp.

I attached a screen capture, in case it could help.

Many thanks for your help,
Best,
Christ
The topic has been locked.
  • holch
  • holch's Avatar
  • Away
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
7 years 3 months ago - 7 years 3 months ago #147171 by holch
[strike][strike][/strike][/strike]Well, the error message seems to be quite obvious. Your Flash-Player seems to be outdated, have some problems or being not existent. Can you play flash at all? (of course there might be another error as well, but you should first check this).

I answer at the LimeSurvey forum in my spare time, I'm not a LimeSurvey GmbH employee.
No support via private message.

Last edit: 7 years 3 months ago by holch.
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
7 years 3 months ago #147213 by tpartner

I noticed errors during importation of the template :

If working on a locale machine, you should simply be able to extract those files from the zipped template download and copy them to the appropriate locations.

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The topic has been locked.
More
7 years 3 months ago #147414 by Csurvey
Hello Holch an Tony,
Many thanks. Sorry for the mess and the delay to answer.

Actually, i did copy/paste the script folder directly in the template, and it works !
I have been bothered at first by the flash player error message, and did take the importation error message to the point, because the message "missing module" was also displayed on the flash page test, even if the module was there and functional... so bad diagnostic.

I have an other and i think it will be my last question :

What properties i will have to edit in order to allow only one "play" of the video ?

I mean, i want to allow the participant just one play at clicking play, and then even block the player or play button or disabling, making disappear Player and so they have to click radio buttons below the Jplayer to tell what was displayed
or
( and i prefer this version in order to focus their attention only on the video) i want to redirect them to a new page of radio-question as if they clicked next ?

Many thanks by advance for your great help.

Best,
Chris
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
7 years 3 months ago #147465 by tpartner
You should be able to use the jPlayer "ended" event - jplayer.org/latest/developer-guide/#jPlayer-event-type

So, something like this for the script (untested):

Code:
<script type="text/javascript">
  $(document).ready(function(){
 
    var thisQuestion = $('#question{QID}');
 
    function resizePlayer() {
      var playerWidth = $('#jquery_jplayer_{QID}').width();
      var aspectRatio = {
        'width': 16,
        'height': 9
      };
      var playerHeight = (playerWidth*aspectRatio.height)/aspectRatio.width;
      $('#jquery_jplayer_{QID}').css('height', playerHeight+'px');
      $('#jquery_jplayer_{QID} img').css('height', playerHeight+'px');
      $('#jp_container_{QID} .jp-video-play').css({
        'height': playerHeight+'px',
        'margin-top': '-'+playerHeight+'px'
      });
    }
    $(window).resize(function() {
      resizePlayer();
    });
 
    $('#jquery_jplayer_{QID}').jPlayer({
      ready: function () {        
        resizePlayer();
        $(this).jPlayer("setMedia", {
        title: "Big Buck Bunny Trailer",
        m4v: "http://www.jplayer.org/video/m4v/Big_Buck_Bunny_Trailer.m4v",
        ogv: "http://www.jplayer.org/video/ogv/Big_Buck_Bunny_Trailer.ogv",
        poster: "http://www.jplayer.org/video/poster/Big_Buck_Bunny_Trailer_480x270.png"
        });
      },
      ended: function () {        
        $(this).jPlayer("destroy");
        $('#jp_container_{QID}').hide;
      },
      cssSelectorAncestor: "#jp_container_{QID}",
      swfPath: "{TEMPLATEURL}scripts/jPlayer-2.9.2/dist/jplayer",
      supplied: "m4v, ogv",
      useStateClassSkin: true,
      autoBlur: false,
      smoothPlayBar: true,
      keyEnabled: true,
      remainingDuration: true,
      toggleDuration: true,
      size: { 
        'width': '100%',
        'height': 'auto', 
        'cssClass': 'jp-video-ls'  // Custom class for LimeSurvey
      }
    });
  });
</script>

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The topic has been locked.
More
7 years 2 months ago #148368 by Csurvey
Hello Tony,
sorry for my big delay to answer, i am just getting again on that work.
Many thanks for all.

I did try to add your script below the script for Jplayer in the question source, but it did not worked. After a first playing of the video,
the player is not hidden, could you help me to fix that ?

I also tried to replace the link for the video with a link for a video i did copy-paste in my local repertoire (localhost installation with MAMP), but the screen remains black.

Actually, i did put the video in the upload/surveys/thenumeroOfmysurvey/files, it is a "test.avi".

In the script, i replaced at the two locations, the ogv: " www.the link to the cartoon movie..." with
avi:"http://localhost:8888/limesurvey2.57.1+161205/limesurvey/upload/surveys/thenumeroOfmysurvey/files/test.avi",
wich is the good link to my video on localhost with MAMP, because when i fill this link in my browser, i download directly the video.
I erased also the lignes below for other format and poster...

Could you help me with filling the good link in order to get access to the video locally, but also with an absolute link for when i would drop the survey on the internet : i will fill one small video by question.

Many, Many thanks for all your work and help.
Best,
Chris
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
7 years 2 months ago - 7 years 2 months ago #148427 by tpartner

I did try to add your script below the script for Jplayer in the question source...

That new script should replace the jPlayer script you had previously.

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Last edit: 7 years 2 months ago by tpartner.
The topic has been locked.
More
7 years 2 months ago #148506 by Csurvey
Hello Tony,
many thanks for your help.

Actually it works :at the end of the video the player remains and the screen go black compared to the first version of the script when you get the last frame of the video, but if you press play again it functions as a "page reload" and you can go again for a watch.
What way you would prefer to force going to the next question ?
Could you indicate me also how to change the skin color of the Player
and how to disable the "wide screen" button on the player ?
Many many thanks
Best,
Chris
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
7 years 2 months ago - 7 years 2 months ago #148529 by tpartner

What way you would prefer to force going to the next question ?

It seems there is a bug in the script provided above (as I said, "untested" :) ).

Use this instead:
Code:
<script type="text/html">
  $(document).ready(function(){
 
    var thisQuestion = $('#question{QID}');
 
    function resizePlayer() {
      var playerWidth = $('#jquery_jplayer_{QID}').width();
      var aspectRatio = {
        'width': 16,
        'height': 9
      };
      var playerHeight = (playerWidth*aspectRatio.height)/aspectRatio.width;
      $('#jquery_jplayer_{QID}').css('height', playerHeight+'px');
      $('#jquery_jplayer_{QID} img').css('height', playerHeight+'px');
      $('#jp_container_{QID} .jp-video-play').css({
        'height': playerHeight+'px',
        'margin-top': '-'+playerHeight+'px'
      });
    }
    $(window).resize(function() {
      resizePlayer();
    });
 
    $('#jquery_jplayer_{QID}').jPlayer({
      ready: function () {        
        resizePlayer();
        $(this).jPlayer("setMedia", {
        title: "Big Buck Bunny Trailer",
        m4v: "http://www.jplayer.org/video/m4v/Big_Buck_Bunny_Trailer.m4v",
        ogv: "http://www.jplayer.org/video/ogv/Big_Buck_Bunny_Trailer.ogv",
        poster: "http://www.jplayer.org/video/poster/Big_Buck_Bunny_Trailer_480x270.png"
        });
      },
      ended: function () {
        $('#jp_container_{QID}').fadeOut(300, function(e) {
          $('#jquery_jplayer_{QID}').jPlayer("destroy");
        });
        $('#movenextbtn, #movesubmitbtn').trigger('click');
      },
      cssSelectorAncestor: "#jp_container_{QID}",
      swfPath: "{TEMPLATEURL}scripts/jPlayer-2.9.2/dist/jplayer",
      supplied: "m4v, ogv",
      useStateClassSkin: true,
      autoBlur: false,
      smoothPlayBar: true,
      keyEnabled: true,
      remainingDuration: true,
      toggleDuration: true,
      size: { 
        'width': '100%',
        'height': 'auto', 
        'cssClass': 'jp-video-ls'  // Custom class for LimeSurvey
      }
    });
  });
</script>

Sample template and survey for LS 2.6x attached below:

File Attachment:

File Name: Demo_jPlay...2-10.zip
File Size:1,174 KB

File Attachment:

File Name: limesurvey...2848.lss
File Size:17 KB

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Last edit: 7 years 2 months ago by tpartner.
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
7 years 2 months ago #148530 by tpartner

and how to disable the "wide screen" button on the player ?

Remove this from the player HTML source.

Code:
<button class="jp-full-screen" role="button" tabindex="0">full screen</button>

I have removed that element and the "Repeat" button in the sample survey attached above.

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The topic has been locked.

Lime-years ahead

Online-surveys for every purse and purpose