Jplayer and Widgets 101-Another in the Dummies Series Like me
  • Vote Up1Vote Down Voisses TechVoisses Tech
    Posts: 1,423Member
    I myself struggle with the jplayer ,but remember "curiosity kills the cat " so lets do it.

    This is another in my 101 series to share with you.

    Lets get the preambles out the way

    This tutorial is designed to be used with the current versions are Airtime and Jplayer

    Versions Are 

    -jQuery.jPlayer.2.4.0

    -Airtime 2.4.1

    We will try to put the player and widgets in separate folders

    1. So we can customize easily
    2. for subsequent updates easily
    3. We can put them in different Iframes

    Please go to



    I will Assume you are doing this on your Airtime Machine


    Post edited by Voisses Tech at 2013-10-22 22:05:23
    Anyone reading this a find it funny about my grammar , I make no apology ,Go get a translator.
    "The Problem with education today is that it takes a university degree to switch on a light bulb"
    "You learn from your mistakes but wise people learn from others mistakes avoid Making mistakes there is not sufficient rooms to make them"
    "Innuendo","If's","Assumptions" and "Fear" are for politician.Who,What,where,When and How are for those seeking knowledge and care about Humanity.
    "I might be in Mud but that does not Make me a Wild Hog(pig)"
    “Any intelligent fool can make things bigger, more complex, and more violent. It takes a touch of genius — and a lot of courage to move in the opposite direction.”
    "The only thing that remains constant is change itself"
    May the force be with you,until our path or destiny bring us in tandem.
  • 7 Comments sorted by
  • Vote Up0Vote Down Voisses TechVoisses Tech
    Posts: 1,423Member
    Jplayer

    Lets Go
    you can download your Jplayer from Airtime

    or 

    Jplayer website

    I chose the Later for the latest

    1. wget http://jplayer.org/latest/jQuery.jPlayer.2.4.0.demos.zip
    2. unzip jQuery.jPlayer.2.4.0.demos.zip
    3. sudo mkdir  /usr/share/airtime/public/player/
    4. sudo cp -R jQuery.jPlayer.2.4.0.demos/* /usr/share/airtime/public/player/
    5.  You should now see a bunch of demos files in /usr/share/airtime/public/player/
    6. Now copy the stream file demo (I like purple flag-pf)(you can use blue monday-bm) to your test file
    7. sudo cp /usr/share/airtime/public/player/demo-08-pf.htm /usr/share/airtime/public/player/mytest.html

    browse to 


    listen to some of ABC Jazz


    Now lets put in your station Airtime Stream

    1. sudo cp /usr/share/airtime/public/player/demo-08-pf.htm /usr/share/airtime/public/player/mylocalstation.html
    2. edit the ABC Jazz info (line 17 and Line 18) to ABC Jazzlook like this

    • title: "yourname",

    Also edit the title in the body of the html (line 67)


    browse to 




    listen your station


    If You want your player to auto play when someone visit the site 

    modify
    ###########################################################
    line 25 add .jPlayer("play")  so it look
    $(this).jPlayer("setMedia", stream).jPlayer("play");

    line 38 change preload: "none", to be 
    preload: "auto",

    ensure your " ; " and "," are there otherwise your player may look broken

    ###########################################################


    To place the code on your remote station (web host)

    • edit the ABC Jazz info (line 17 and Line 18) to look like this

    title: "yourname",

    • make a player folder

    • copy or upload the

    /player/js
    /player/skin
    /player/mylocalstation.html

    *note both the skin and js folder has more files than you need,the files required are
    skin (blue.monday and/or pink.flag) folders
    js (Jplayer.swf and jquery.jplayer.min.js) files

    you can delete the others

    You can unzip the Jquery jplayer download on a local desktop to     test your player but be aware of the security risk of flashmand therefore you need to allow permissions for flash (read adobe security for that)


    For Further Reading




    Post edited by Voisses Tech at 2013-10-23 09:51:30
    Anyone reading this a find it funny about my grammar , I make no apology ,Go get a translator.
    "The Problem with education today is that it takes a university degree to switch on a light bulb"
    "You learn from your mistakes but wise people learn from others mistakes avoid Making mistakes there is not sufficient rooms to make them"
    "Innuendo","If's","Assumptions" and "Fear" are for politician.Who,What,where,When and How are for those seeking knowledge and care about Humanity.
    "I might be in Mud but that does not Make me a Wild Hog(pig)"
    “Any intelligent fool can make things bigger, more complex, and more violent. It takes a touch of genius — and a lot of courage to move in the opposite direction.”
    "The only thing that remains constant is change itself"
    May the force be with you,until our path or destiny bring us in tandem.
  • Vote Up0Vote Down Voisses TechVoisses Tech
    Posts: 1,423Member
    Widgets

    Widgets tell whats on air and schedule

    Now that your appetite is wet lets do some widgets


    1. wget http://sourceforge.net/projects/airtime/files/2.4.1/airtime-2.4.1-ga.tar.gz/
    2. tar -zxvf airtime-2.4.1-ga.tar.gz
    3. sudo mkdir /usr/share/airtime/public/widgets/
    4. sudo cp -R Airtime-airtime-2.4.1-ga/widgets/*  /usr/share/airtime/public/widgets/
    5. sudo cp /usr/share/airtime/public/widgets/sample_page.html /usr/share/airtime/public/widgets/mywidget.html


    Go to your Airtime server and enable your widget information

    Stream ==> Preference===> Allow Remote Websites To Access "Schedule" Info?(Enable this to make front-end widgets work.)

    browse to 


    Now Modify your widget.html to whatever you want it to be

    • sudo pico /usr/share/airtime/public/widgets/mywidget.html

    Read 


    on how to make your widgets Public




    Post edited by Voisses Tech at 2013-10-23 09:53:28
    Anyone reading this a find it funny about my grammar , I make no apology ,Go get a translator.
    "The Problem with education today is that it takes a university degree to switch on a light bulb"
    "You learn from your mistakes but wise people learn from others mistakes avoid Making mistakes there is not sufficient rooms to make them"
    "Innuendo","If's","Assumptions" and "Fear" are for politician.Who,What,where,When and How are for those seeking knowledge and care about Humanity.
    "I might be in Mud but that does not Make me a Wild Hog(pig)"
    “Any intelligent fool can make things bigger, more complex, and more violent. It takes a touch of genius — and a lot of courage to move in the opposite direction.”
    "The only thing that remains constant is change itself"
    May the force be with you,until our path or destiny bring us in tandem.
  • Vote Up0Vote Down Voisses TechVoisses Tech
    Posts: 1,423Member
    That's it folks

    grab a beer and go streaming


    *********************************
    * V.O.I.S.S.E.S.      *         * 
    * Can You Hear Me Now *         *
    *********************************

    ♬♬♬♬♬♬♬♬♬♬♬♩♪♫♩♪♫♪♩♫♪♩ ♬♬♬♬♬♬♬♬♬♬♬
    ######################################################
    [En][24/7][712- 432- 8476]############################

    [Korean][24/7] [712- 432- 8464]#######################

    [En][Sundays 2300-Mondays 0600 EST][712- 432- 8437]###
    ######################################################
    Post edited by Voisses Tech at 2013-11-12 02:40:51
    Anyone reading this a find it funny about my grammar , I make no apology ,Go get a translator.
    "The Problem with education today is that it takes a university degree to switch on a light bulb"
    "You learn from your mistakes but wise people learn from others mistakes avoid Making mistakes there is not sufficient rooms to make them"
    "Innuendo","If's","Assumptions" and "Fear" are for politician.Who,What,where,When and How are for those seeking knowledge and care about Humanity.
    "I might be in Mud but that does not Make me a Wild Hog(pig)"
    “Any intelligent fool can make things bigger, more complex, and more violent. It takes a touch of genius — and a lot of courage to move in the opposite direction.”
    "The only thing that remains constant is change itself"
    May the force be with you,until our path or destiny bring us in tandem.
  • Vote Up0Vote Down Voisses TechVoisses Tech
    Posts: 1,423Member
    To place the code on your remote station (web host) without loading it on a local machine

    1. wget http://jplayer.org/latest/jQuery.jPlayer.2.4.0.demos.zip
    2. unzip jQuery.jPlayer.2.4.0.demos.zip
    3. make a directory on your host called player
    4. copy js folder,skin folder and demo-08 from your jQuery.jPlayer.2.4.0.demos
    5. To look like this
    • /player/js
    • /player/skin
    • /player/demo-08-pf.htm

    *note both the skin and js folder has more files than you need,the files required are
    skin (blue.monday and/or pink.flag) folders
    js (Jplayer.swf and jquery.jplayer.min.js) files

    • test to hear ABC Jazz
                        browse to

                       http://IPhost/player/demo-08-pf.htm

    now change to your own station by copying demo-08-pf.htm to

    mystation.html

     and editing mystation.html

    • edit the ABC Jazz info (line 17 and Line 18) to look like this

                 title: "yourname",
                mp3: "http://IP:port/stream"

                 browse to

                    http://IPhost/player/mystation.html

    do like wise for widgets

    *********************************
    * V.O.I.S.S.E.S.      *         * 
    * Can You Hear Me Now *         *
    *********************************

    ♬♬♬♬♬♬♬♬♬♬♬♩♪♫♩♪♫♪♩♫♪♩ ♬♬♬♬♬♬♬♬♬♬♬
    ######################################################
    [En][24/7][712- 432- 8476]############################

    [Korean][24/7] [712- 432- 8464]#######################

    [En][Sundays 2300-Mondays 0600 EST][712- 432- 8437]###
    ######################################################

    Post edited by Voisses Tech at 2013-10-23 09:47:40
    Anyone reading this a find it funny about my grammar , I make no apology ,Go get a translator.
    "The Problem with education today is that it takes a university degree to switch on a light bulb"
    "You learn from your mistakes but wise people learn from others mistakes avoid Making mistakes there is not sufficient rooms to make them"
    "Innuendo","If's","Assumptions" and "Fear" are for politician.Who,What,where,When and How are for those seeking knowledge and care about Humanity.
    "I might be in Mud but that does not Make me a Wild Hog(pig)"
    “Any intelligent fool can make things bigger, more complex, and more violent. It takes a touch of genius — and a lot of courage to move in the opposite direction.”
    "The only thing that remains constant is change itself"
    May the force be with you,until our path or destiny bring us in tandem.
  • Vote Up0Vote Down Daniel JamesDaniel James
    Posts: 844Member, Sourcefabric Team
    Thanks for posting this tutorial!
  • Vote Up0Vote Down Josh McLainJosh McLain
    Posts: 44Member, Administrator, Sourcefabric Team
    This is great! Thanks so much for doing this!!!!

    -Josh
  • Vote Up0Vote Down Voisses TechVoisses Tech
    Posts: 1,423Member
    Thanks to you  also and to all those who have contributed and for the opportunity of this forum.

     I found most players do not play on android ,iphone ,Ipad so here is my fixed for most players.

    Go to line 66 and the div class for jp title and place this 

    <li>
      <audio controls>
           <source src="http://listen.radionomy.com/abc-jazz" type="audio/mpeg">

       </audio>
    </li>
    <li><a href="http://listen.radionomy.com/abc-jazz">Andriod click here</a></li>


    So that it look like this

    <div class="jp-title">
              <ul>
                  <li>
                     <audio controls>
                         <source src="http://listen.radionomy.com/abc-jazz" type="audio/mpeg">
                     </audio>
                  </li>
                   <li><a href="http://listen.radionomy.com/abc-jazz">Andriod click here</a></li>
                </ul>
    </div>


    This seems to work for most of my unsupported browser and devices.

    put in your stream and you should be on your way

    Not very beautiful but if you have a script that works let us know

    Ps. Demo-01-pf.htm is a much beautiful player than 08


    *********************************
    * V.O.I.S.S.E.S.      *         * 
    * Can You Hear Me Now *         *
    *********************************

    ♬♬♬♬♬♬♬♬♬♬♬♩♪♫♩♪♫♪♩♫♪♩ ♬♬♬♬♬♬♬♬♬♬♬
    ######################################################
    [En][24/7][712- 432- 8476]############################

    [Korean][24/7] [712- 432- 8464]#######################

    [En][Sundays 2300-Mondays 0600 EST][712- 432- 8437]###
    ######################################################








    Post edited by Voisses Tech at 2013-10-23 18:48:40
    Anyone reading this a find it funny about my grammar , I make no apology ,Go get a translator.
    "The Problem with education today is that it takes a university degree to switch on a light bulb"
    "You learn from your mistakes but wise people learn from others mistakes avoid Making mistakes there is not sufficient rooms to make them"
    "Innuendo","If's","Assumptions" and "Fear" are for politician.Who,What,where,When and How are for those seeking knowledge and care about Humanity.
    "I might be in Mud but that does not Make me a Wild Hog(pig)"
    “Any intelligent fool can make things bigger, more complex, and more violent. It takes a touch of genius — and a lot of courage to move in the opposite direction.”
    "The only thing that remains constant is change itself"
    May the force be with you,until our path or destiny bring us in tandem.
Add a Comment