Back to limesurvey.org

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

  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
8 years 3 months ago #147465 by tpartner
Replied by tpartner on topic Short Audio Clips for Surveys - Hosting/Streaming Advice
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: "https://www.jplayer.org/video/m4v/Big_Buck_Bunny_Trailer.m4v",
        ogv: "https://www.jplayer.org/video/ogv/Big_Buck_Bunny_Trailer.ogv",
        poster: "https://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
8 years 3 months ago #148368 by Csurvey
Replied by Csurvey on topic Short Audio Clips for Surveys - Hosting/Streaming Advice
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:"https://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
8 years 3 months ago - 8 years 3 months ago #148427 by tpartner
Replied by tpartner on topic Short Audio Clips for Surveys - Hosting/Streaming Advice

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: 8 years 3 months ago by tpartner.
The topic has been locked.
More
8 years 3 months ago #148506 by Csurvey
Replied by Csurvey on topic Short Audio Clips for Surveys - Hosting/Streaming Advice
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
8 years 3 months ago - 8 years 3 months ago #148529 by tpartner
Replied by tpartner on topic Short Audio Clips for Surveys - Hosting/Streaming Advice

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: "https://www.jplayer.org/video/m4v/Big_Buck_Bunny_Trailer.m4v",
        ogv: "https://www.jplayer.org/video/ogv/Big_Buck_Bunny_Trailer.ogv",
        poster: "https://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.
Attachments:
Last edit: 8 years 3 months ago by tpartner.
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
8 years 3 months ago #148530 by tpartner
Replied by tpartner on topic Short Audio Clips for Surveys - Hosting/Streaming Advice

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.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
8 years 3 months ago - 8 years 3 months ago #148531 by tpartner
Replied by tpartner on topic Short Audio Clips for Surveys - Hosting/Streaming Advice

Could you indicate me also how to change the skin color of the Player

The player appearance is controlled by styles in the assigned skin. In LS 2.6x, the skin is defined by including the appropriate CSS file in config.xml like this:

Code:
<css>
  <filename>css/jquery-ui-custom.css</filename>
  <filename>css/bootstrap-slider.css</filename>
 
  <filename>css/awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css</filename>
  <filename>css/flat_and_modern.css</filename>
 
  <filename>css/template.css</filename>
 
  <filename>scripts/jPlayer-2.9.2/dist/skin/blue.monday/css/jplayer.blue.monday.css</filename>
</css>

Or this:

Code:
<css>
  <filename>css/jquery-ui-custom.css</filename>
  <filename>css/bootstrap-slider.css</filename>
 
  <filename>css/awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css</filename>
  <filename>css/flat_and_modern.css</filename>
 
  <filename>css/template.css</filename>
 
  <filename>scripts/jPlayer-2.9.2/dist/skin/pink.flag/css/jplayer.pink.flag.css</filename>
</css>

In the template attached above, I have assigned the "Blue Monday" skin.
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Last edit: 8 years 3 months ago by tpartner.
The topic has been locked.
More
8 years 3 months ago #148547 by Csurvey
Replied by Csurvey on topic Short Audio Clips for Surveys - Hosting/Streaming Advice
Many thanks Tony, it works perfectly. Fantastic

I am doing some trying now and i am searching for disabling the timers on both side the player, the title of the video and the stop button also :
i found the class for the timers : "jp-duration" and "jp-current-time" but could not figure if i am going to disable in the css (in the template settings), and i will have to disable the other "stop" and " title" also by there i think...

Where would you go for that ?

And i think it will really be my last question for now, can i use .avi files with Jplayer ?

Many thanks again,
Best,
Chris
The topic has been locked.
Moderators: tpartner, holch

Lime-years ahead

Online-surveys for every purse and purpose

Pricing & Plans
Get started

Legal

About Us

Open Source