jPlayer is a flexible media player based on jQuery, which can be used for playing audio and video files.
The instructions below give a typical installation procedure where you will have multiple media files and player instances for each one on the page. The script takes care to prevent multiple players playing at the same time.
For other scenarios see the main jPlayer integration page.
We recommend starting by following these procedures exactly, and then when you have that working, adapting to your precise needs.
Method:
Add an Upload component to the site, and upload the following files to it:
- jplayer.pink.flag.css
- jplayer.pink.flag.jpg
- jplayer.pink.flag.seeking.gif
- jplayer.pink.flag.video.play.png
- Jplayer.swf
- jquery.jplayer.min.js
These files are available from http://www.jplayer.org/
Make a note of the page number of the Upload component, and substitute the paths in the script below (ie replace the three instances of 27 shown in bold below with your own upload page's number)
On the Page where you want the player to be shown:
Place the following script in the Behavior Editor / Settings / Scripts / "<head> General":
<link href="../27/files/jplayer.pink.flag.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="../27/files/jquery.jplayer.min.js"></script>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function () {
var swfPath = '../27/files/';
var i = 0;
$('div.nc-jp-jplayer').each(
function () {
var media = {};
var supplied = '';
$('div.nc-jp-streaming-file', this).each(
function () {
var file = $(this).text();
if (file) {
var type = file.replace(/^.*\.([^\.\?]*)(?:$|\?).*/, '$1');
media[type] = file;
supplied += (supplied ? ', ' : '') + type;
}
}
);
if (supplied) {
$('div.jp-audio', this).attr('id', 'jp_container_' + ++i);
$('div.jp-jplayer', this).attr('id', 'jquery_jplayer_' + i).jPlayer({
ready: function () {
$(this).jPlayer("setMedia", media);
},
play: function () { // To avoid multiple jPlayers playing together.
$(this).jPlayer("pauseOthers");
},
swfPath: swfPath,
supplied: supplied,
wmode: "window",
smoothPlayBar: true,
keyEnabled: true,
cssSelectorAncestor: '#jp_container_' + i
});
}
}
);
});
//]]>
</script>
Embed on the Page a Custom View to show the records you want the user to be able to play.
The Custom View should be based on a Query that includes, as a minimum:
- A File field, named eg "File"
- A Text field, named eg "Name"
In the HTML Source view of the Custom View's Records surface, paste the following jPlayer script:
<div class="nc-jp-jplayer">
<div class="nc-jp-streaming-file">
Replace with File field</div>
<div>
<div class="jp-jplayer">
</div>
<div class="jp-audio">
<div class="jp-type-single">
<div class="jp-gui jp-interface">
<ul class="jp-controls">
<li>
<a class="jp-play" href="javascript:;" tabindex="1">play</a></li>
<li>
<a class="jp-pause" href="javascript:;" tabindex="1">pause</a></li>
<li>
<a class="jp-stop" href="javascript:;" tabindex="1">stop</a></li>
<li>
<a class="jp-mute" href="javascript:;" tabindex="1" title="mute">mute</a></li>
<li>
<a class="jp-unmute" href="javascript:;" tabindex="1" title="unmute">unmute</a></li>
<li>
<a class="jp-volume-max" href="javascript:;" 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-current-time">
</div>
<div class="jp-duration">
</div>
<ul class="jp-toggles">
<li>
<a class="jp-repeat" href="javascript:;" tabindex="1" title="repeat">repeat</a></li>
<li>
<a class="jp-repeat-off" href="javascript:;" tabindex="1" title="repeat off">repeat off</a></li>
</ul>
</div>
<div class="jp-title">
<ul>
<li>
<p>
Replace with Name field</p>
</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>
</div>
</div>
Click 'Source' to return to the non-source view:
Highlight the line "Replace with File field", and use the Embed dialog to replace that text with the embed for the File field.
Highlight the line "Replace with Name field", and use the Embed dialog to replace that text with the embed for the Name field.
Back in the HTML source view, find the second line:
<div class="nc-jp-streaming-file">
and change it to:
<div class="nc-jp-streaming-file" style="display: none;">
(This will hide the file link from view, while still allowing the player to reference it.)
You should now be able to browse to your Page and see the jPlayer interface.
