1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

XF 1.2 Anyone integrated jPlayer

Discussion in 'Styling and Customization Questions' started by Stuart Wright, Aug 25, 2013.

  1. Stuart Wright

    Stuart Wright Well-Known Member

    Hello.
    I want to be able to embed our podcasts into posts. Several on a page.
    Has anyone integrated jPlayer into Xenforo? It seems to be a popular jQuery player.
     
  2. MattW

    MattW Well-Known Member

    Just having a play after seeing the demo
    jplayer.PNG
     
  3. Alfa1

    Alfa1 Well-Known Member

    This seems much better suited into a media gallery or resource manager.
     
  4. MattW

    MattW Well-Known Member

  5. Stuart Wright

    Stuart Wright Well-Known Member

    That's awesome, Matt. Would it be possible to wrap it up into an addon by any chance, please?
     
    MattW likes this.
  6. MattW

    MattW Well-Known Member

    It's just a custom MediaBB code Stuart. All I've done is taken the standard HTML page, turned it into a PHP page, and used a $_GET from the URL which is passed into the iframe via the BBCode.

    I can still zip it all up and upload it in here for you to take a look at if you want? You'd then be able to tweak it to suite your site?
     
  7. Stuart Wright

    Stuart Wright Well-Known Member

    Please. A bbcode makes sense, but I'm still familiarising myself with vB and it's an uphill struggle at the moment.
     
    MattW likes this.
  8. MattW

    MattW Well-Known Member

    This is the BB Code Media Sites stuff:

    Media Side ID: podcast
    Site Title: devz22se (use your own custom title)
    Match URLs: http://dev.z22se.com/music/{$id} (change to your own music/podcast directory)
    Embed HTML: (change the iframe src to match your xenforo directory where you load the files)
    Code:
    <iframe src="http://dev.z22se.com/xenforo/jPlayer.php?mp3={$id}" width="450" height="130" frameborder="0"></iframe>
    and that's it. I've added a comment into the jPlayer.php file where you change the URL to your own as well.
     

    Attached Files:

    Motobaka and mistypants like this.
  9. Stuart Wright

    Stuart Wright Well-Known Member

    Many thanks.
    The problem I have now is that the post looks like this
    Code:
    [playmp3]http://www.avpodcast.co.uk/podcast.mp3?p=230[/playmp3]
    (Since our podcasts are located on a different domain).
    And Xenforo puts a URL around it, breaking the bb code.
    Is there a fix for this?
     
  10. MattW

    MattW Well-Known Member

    It shouldn't be putting the full URL into the bbcode the way I was doing it, as the URL was hardcoded into the PHP file, and all that is parsed into the GET was the file name of the MP3 file.
     
  11. MattW

    MattW Well-Known Member

  12. MattW

    MattW Well-Known Member

  13. MattW

    MattW Well-Known Member

    jPlayer.php

    PHP:
    <!DOCTYPE html><html><head><meta charset=utf-8 />
    <!-- Website Design By: www.happyworm.com -->
    <title>Demo : jPlayer as an audio player</title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <link href="skin/blue.monday/jplayer.blue.monday.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery.jplayer.min.js"></script>
    <script type="text/javascript">
    //<![CDATA[
    $(document).ready(function(){

            $("#jquery_jplayer_1").jPlayer({
                    ready: function () {
                            $(this).jPlayer("setMedia", {
                                    <?php
                                    
    if (isset($_GET['mp3'])) {
                                    
    $mp3file $_GET['mp3'];
                                    }
                                    
    # Change this to suite your own directory
                                    
    echo "mp3:\"http://www.avpodcast.co.uk/cast/$mp3file\"";
                                    
    ?>
                            });
                    },
                    swfPath: "js",
                    supplied: "mp3",
                    wmode: "window",
                    smoothPlayBar: true,
                    keyEnabled: true
            });
    });
    //]]>
    </script>
    </head>
    <body>

                    <div id="jquery_jplayer_1" class="jp-jplayer"></div>

                    <div id="jp_container_1" class="jp-audio">
                            <div class="jp-type-single">
                                    <div class="jp-gui jp-interface">
                                            <ul class="jp-controls">
                                                    <li><a href="javascript:;" class="jp-play" tabindex="1">play</a></li>
                                                    <li><a href="javascript:;" class="jp-pause" tabindex="1">pause</a></li>
                                                    <li><a href="javascript:;" class="jp-stop" tabindex="1">stop</a></li>
                                                    <li><a href="javascript:;" class="jp-mute" tabindex="1" title="mute">mute</a></li>
                                                    <li><a href="javascript:;" class="jp-unmute" tabindex="1" title="unmute">unmute</a></li>
                                                    <li><a href="javascript:;" class="jp-volume-max" tabindex="1" title="max volume">max volume</a></li>
                                            </ul>
                                            <div class="jp-progress">
                                                    <div class="jp-seek-bar">
                                                            <div class="jp-play-bar"></div>
                                                    </div>
                                            </div>
                                            <div class="jp-volume-bar">
                                                    <div class="jp-volume-bar-value"></div>
                                            </div>
                                            <div class="jp-time-holder">
                                                    <div class="jp-current-time"></div>
                                                    <div class="jp-duration"></div>

                                                    <ul class="jp-toggles">
                                                            <li><a href="javascript:;" class="jp-repeat" tabindex="1" title="repeat">repeat</a></li>
                                                            <li><a href="javascript:;" class="jp-repeat-off" tabindex="1" title="repeat off">repeat off</a></li>
                                                    </ul>
                                            </div>
                                    </div>
                                    <div class="jp-title">
                                            <ul>
                                                    <li><?php echo $mp3file?></li>
                                            </ul>
                                    </div>
                                    <div class="jp-no-solution">
                                            <span>Update Required</span>
                                            To play the media you will need to either update your browser to a recent version or update your <a href="http://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>.
                                    </div>
                            </div>
                    </div>
    </body>

    </html>

    Match URLS:
    Code:
    http://www.avpodcast.co.uk/cast/{$id}
    Embed HTML
    Code:
    <iframe src="http://dev.z22se.com/xenforo/jPlayer.php?mp3={$id}" width="450" height="130" frameborder="0"></iframe>
     
  14. cclaerhout

    cclaerhout Well-Known Member

  15. Stuart Wright

    Stuart Wright Well-Known Member

    I *could* do it that way, except it would break the hundreds of existing bb codes in posts we have already.
    I could use the search and replace tool to change those to just have the podcast id.
    But yes, the podcasts URLs have to be the full
    Code:
    http://www.avpodcast.co.uk/podcast.mp3?p= + podcast id
    and being able to turn off the Xenforo URL parsing in the bb code would by far be the easiest solution.
     
  16. MattW

    MattW Well-Known Member

    Oh OK, there isn't a way to disable the auto linking of the URL as far as I can see.

    TBH, taking a look at the resource that @cclaerhout has posted, that would probably be well suited to your needs, as there is a really good example linked in the resource.
    http://www.afioc.com/forums/threads/bbcodes-demo-multimedia.1652/#post-1967
     
  17. cclaerhout

    cclaerhout Well-Known Member

    Actually there's one, I mean a clean one, see here for reference. This solution has been integrated in this addon with a simple option. If @Stuart Wright has already the code for its former bbcode it shouldn't be hard to update it. I didn't know the jPlayer script. It looks nice.
     
    MattW likes this.
  18. Stuart Wright

    Stuart Wright Well-Known Member

    Thanks all for your help. I got it working beautifully and I will explore all the options suggested to make sure I get the best.
     
    MattW likes this.

Share This Page