Search:  

Previous pageTechniques & KB Articles Next page
Using the jPlayer media player - multiple players 

Using the jPlayer media player - multiple players

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 pageThe 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">
&nbsp;</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">
&nbsp;</div>
</div>
</div>
<div class="jp-volume-bar">
<div class="jp-volume-bar-value">
&nbsp;</div>
</div>
<div class="jp-current-time">
&nbsp;</div>
<div class="jp-duration">
&nbsp;</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.

           
 

DATA

Managing Data

Tables

Referential Integrity 

Data Entry Forms

Queries and Views

Custom Views

 

USERS & SECURITY

Users & Permissions

User Group Manager 

User Registration

Access Codes & Agreements

Personalizing Experience

Managing Profiles

 

SaaS

SaaS Server

SaaS Site Manager

SaaS Client Accounting

SaaS Templates & Clones

SaaS Self Service

Associates System 

 

CMS

User Editable pages

CSS Editor

Editing Pages

Direct URLs

Using Javascript & JQuery

Content Approval & Workflow

 

WEB

Key Concepts

Components

Understanding Embeds

Site Building

Themes System

SEO Optimization

 
           
 
clearString   neatComponents™    © Enstar LLC  1999-2019 All Rights Reserved      Terms of Use      Privacy & Cookies      Contact us...
 
 
 
 

 

Docs HomePrint:   Print this page