Using the jPlayer media player - single playerjPlayer 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 only have one media file and one player instance on the page. 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:
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 file = $("#streaming_file").text(); $("#jquery_jplayer_1").jPlayer({ ready: function () { $(this).jPlayer("setMedia", { mp3: file }); }, swfPath: "../27/files/", supplied: "mp3", wmode: "window", smoothPlayBar: true, keyEnabled: true }); }); //]]> </script> Embed on the Page a Custom View to show the record you want the user to be able to play. The Custom View should be based on a Query that includes, as a minimum:
In the HTML Source view of the Custom View's Records surface, paste the following jPlayer script: <div id="streaming_file"> Replace with File field</div> <div> <div class="jp-jplayer" id="jquery_jplayer_1"> </div> <div class="jp-audio" id="jp_container_1"> <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> 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 first line: <div id="streaming_file"> and change it to: <div id="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. |
|
 | | |