• 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

Stuart Wright

Well-known member
#1
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.
 

MattW

Well-known member
#6
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?
 

MattW

Well-known member
#8
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.
 

Attachments

Stuart Wright

Well-known member
#9
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?
 

MattW

Well-known member
#10
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.
 

MattW

Well-known member
#13
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>
 

Stuart Wright

Well-known member
#15
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.
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.
 

MattW

Well-known member
#16
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.
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