Fun Actvity Time, Lets do some work! (Making a Dynamic Playlist)

So, lets see I have a quiz setup and the quiz outputs a string of numbers.

answers=1123

Each number corresponds to the choice taken by the viewer. I have the setup in place and I just use divs that show or hide based on the numbers. This is all fun and easy to do.

Now for the fun part. Each block of text is now recorded into an audio, I need to assemble the answers and play them in a sequence.

Like

1123

1 = Q1-Audio
1 = Q2-Audio
2-Q3-Audio
3-Q4-Audio

Right, using Jwplayer, I am need to make a playlist so it plays it in the exact sequence.

So, far JWplayer have given me this hint:

http://support.jwplayer.com/customer/portal/articles/1439570-example-loading-new-playlists

But it doesn't mention a list of files.

I dug around and found .smil but it's used for RTMP which doesn't work for mobile.


So, after digging more, I found a way. To make this work I need to create an RSS file which saves the file. That can later be accessed later on. It has to be backward compatible in a way.

http://support.jwplayer.com/customer/portal/articles/1413113-configuration-options-reference

http://support.jwplayer.com/customer/portal/articles/1403635-media-format-reference

Above are some reference articles.


So, lets talk about psuedo code.

User takes the quiz > Reaches the confirmation page > Results are send to the script > User opted in/results details send as well.


User opens e-mail > Clicks link > Gets taken to result page > page shows information based on the results.


Okay that is already working and in place

The script that opts users in and does the processing is the same one slarti help me create, you know the image thingy. Yep this the exact one.

PHP

Parse Query String
Var answers;
var quiz;
answers  = filename;
answers = playlist;

loop for playlist;
takes number [1024 or something] and assigns them file name.

Answers logic.
q1 = 2 choices = 2 audio files, values 0 1
q2 = 3 choices = 3 audio files values 0 1 2
q3- 4 choices = 4 audio files values 0 1 2 3
q4 - 4 choices = 4 audio files values 0 1 2 3

So, if the value is 1 2 1 3
q1(audio2)q2(audio3)q3(audio2)q4(audio4)

Array has the values stored in, it takes the values and makes and RSS file in the correct syntax (this is will be difficult)

saves the file in the correct folder.


fp create file 'quiz+filename', a; //embeds the quiz type [MM/PENG/EX] + filename [0123]
fp saves the rss the file and is later called in the result file.






===========================================

Result file

parse query,
takes answers and quiz type.

JWPLAYER CODE.
rss link.
Links to to the domain with rss files saved.
www.test.com/results/quiz+answers.rss

So it will be unique and won't get duplicated

JWPLAYER loads the files and simply plays it.

RSS Syntax
jwplayer("myElement").setup({
playlist: [{
image: "/assets/sintel.jpg",
sources: [{
file: "/assets/q1audio1.mp4"
}],
title: "Sintel Movie Trailer",
tracks: [{
file: "/assets/captions.vtt"
}]
}]
});


Now this is the hard part, how I can make a file like that save it? Not really sure on this, Slarti any comments?

Comments

  • DfgDfg Admin
    I am an idiot, actually, below is the block option meaning I can dynamically add more blocks or in this case, I can add 4 blocks since I know what each user will get 4 audios.
    jwplayer("myElement").setup({
    playlist: [{
    image: "/assets/sintel.jpg",
    sources: [{
    file: "/assets/q1audio1.mp4"
    }],
    title: "Sintel Movie Trailer",
    tracks: [{
    file: "/assets/captions.vtt"
    }]

    [{
    image: "/assets/sintel.jpg",
    sources: [{
    file: "/assets/q2audio2.mp4"
    }],
    title: "Sintel Movie Trailer",
    tracks: [{
    file: "/assets/captions.vtt"
    }]

    [{
    image: "/assets/sintel.jpg",
    sources: [{
    file: "/assets/q3audio1.mp4"
    }],
    title: "Sintel Movie Trailer",
    tracks: [{
    file: "/assets/captions.vtt"
    }]

    [{
    image: "/assets/sintel.jpg",
    sources: [{
    file: "/assets/q4audio4.mp4"
    }],
    title: "Sintel Movie Trailer",
    tracks: [{
    file: "/assets/captions.vtt"
    }]
     }]
    });
  • DfgDfg Admin
    So, currently went with the beta approach.

    <div id='audioplayer' style="background-color:#FFF;"></div>
    <script>
        jwplayer("audioplayer").setup({
          file:"intro.aac",
          image: "img",
          width: "100%",
           controls: "true",
            autostart: "true",
            primary: "html5",
          aspectratio: "16:9",
          height: "auto"

         
        });
    </script>
    <script>
      function loadVideo(myFile,myImage) {
        jwplayer().load([{
          file: myFile,
          image: myImage
        }]);
        jwplayer().play();
      };
    </script>


    And click events

              <center> <a href="javascript:loadVideo('Q1-yes.aac','Here.jpg')"> <h3>For Question #1, Click Here </h3></a></center>


    So, it's usable but not what I require in the end :(



Sign In or Register to comment.