XF 1.2 Anyone integrated jPlayer

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.
 
Sort by date Sort by votes
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?
 
Upvote 0 Downvote
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

Upvote 0 Downvote
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?
 
Upvote 0 Downvote
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.
 
Upvote 0 Downvote
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>
 
Upvote 0 Downvote
MattW said:
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.
Click to expand...
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.
 
Upvote 0 Downvote
Stuart Wright said:
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.
Click to expand...
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
 
Upvote 0 Downvote
You must log in or register to reply here.

Similar threads

robdog
XF 2.3 Has anyone attempted a native app interface?
Replies
2
Views
89
robdog
robdog
J
  • Question Question
Has anyone setup a reverse proxy for XenForo as a subfolder?
Replies
3
Views
115
josh_b_and_b
J
zzlpolitics
Anyone had success with shoutbox/chatroom type add-ons?
Replies
4
Views
80
Suzanne O
Suzanne O
DiscussionBucks
  • Question Question
XF 2.2 Assistance Needed: Disabling Xenforo Caching/Service Workers to Resolve Ezoic Integration Issues
Replies
2
Views
53
rdn
R
zzlpolitics
  • Question Question
Has anyone created any custom help pages they'd be willing to share?
Replies
1
Views
50
Mr Lucky
Mr Lucky
Back
Top Bottom