The jPlayer module provides a wrapper around the jPlayer JavaScript library.
This library provides an HTML5-based player, that uses a Flash fallback for
browsers that do not support it. This module provides a default presentation for
the player, as well as integration with file fields. This makes it possible to
easily convert the display of any file field into an audio or video player.
This player will work with the media types jPlayer supports: mp3, m4a, m4v, oga,
ogv, webma, webmv, wav. (Also jpeg, jpg and png for poster artwork.) Please be
sure to restrict the file upload extensions on your file fields to only allow
these extensions, or less depending on your requirements.
This player will only work with files supported by the jPlayer library.
Installation
-
Install this module using the official Backdrop CMS instructions at
https://backdropcms.org/guide/modules -
Visit the configuration page under Administration > Configuration > JPlayer
(admin/config/media/jplayer) and enter the required information. -
When you manage the display of file fields within your content types
(admin/structure/types/manage/{type}/display) choose 'jPlayer - Player'
as the format. You can then configure the settings available for that
instance.
Documentation
Additional documentation is located in the Wiki:
https://github.com/backdrop-contrib/jplayer/wiki/Documentation
Issues
Bugs and Feature requests should be reported in the Issue Queue:
https://github.com/backdrop-contrib/jplayer/issues
Current Maintainers
- Jen Lampton (https://github.com/jenlampton)
- seeking additional maintainers
Credits
- Ported to Backdrop CMS by Jen Lampton.
- Maintained for Drupal by Mark Casias
- Originally written for Drupal by Lullabot.
- Includes the JPlayer JavaScript Library.
License
This project is GPL v2 software. See the LICENSE.txt file in this directory for
complete text.
PLAYER KINDS
When configuring your formatter you will be given the option of two 'kinds' of
jPlayer. Below is the difference between them:
-
Single
Intelligent single instance player which can take multiple formats of the
same kind e.g. ogv and m4v and display the correct one depending on your
browser. Also takes image files for poster frames. Works with both audio
and video.For use on a multi-value file field, or single value if you only want to
support one kind of media.If you happen to upload a video file type then the jPlayer player will
automatically convert itself into a video player. -
Playlist
For use on a multi-value file field. Each file uploaded will be added to a
playlist. Which users will be able to navigation between. If you upload a
video file then the player will convert to a video player automatically. If
audio files are also present then a blank video frame will be displayed.You can also select your repeat option. If set to 'All' then the player will
play all files within the playlist one after the other, once it reaches the
end it will start again at the beginning. If set to 'Single' then it will
repeat a single file within the playlist until the user chooses to play
another file.
THEMING
The jPlayer default output uses a lot of CSS to get the player looking
respectable. This default set of CSS is based on the demonstration skin provided
at http://www.happyworm.com/jquery/jplayer/latest/demos.htm.
Note that the default HTML output of jPlayer module is a standard template that
other "skins" may work with. It is highly suggest to not override the
jplayer.tpl.php file and instead build all your custom theming on top of the
default HTML through CSS.
To override the CSS file:
-
Copy (or create a new .css file) and place it in your theme with the same
name as the original (jplayer.css). -
In your theme .info file, add the line:
stylesheets[all][] = jplayer.css
to point to the new css file in your theme. If your file is a sub-directory,
you will need adjust the stylesheet declaration to include that
sub-directory.stylesheets[all][] = css/jplayer.css
jplayer.css and jplayer.jpg have to be in the same folder, so if you want to
override one of them copy also the other one. For more information, see
https://drupal.org/node/263967.
To override the Javascript file:
-
Copy (or create a new .js file) and place it in your theme with the same
name as the original (jplayer.js). -
In your theme .info file, add the line:
scripts[] = jplayer.js
to point to new new javascript file in your theme. If your file is a
sub-directory, you will adjust the JavaScript declaration to include that
sub-directory.For more information, see http://drupal.org/node/171213.
FAQ
Q: Player is not visible onscreen
A1: is the widget type for the field set to 'jPlayer'? If in doubt, check the
html for the page includes elements with classes such as jp-audio or
jp-playlist in the expected area).
A2: has the jplayer module's CSS been included on the page?
A3: has the jPlayer JS been included on the page?
Q: Player apparently there but is completely unresponsive (no JS events attached
to controls)
A1: check to see that JavaScript enabled on your browser
A2: Check that you are not relying on a version of Flash being installed that
isn't present or is too old.
A3: check you are using jQuery >= 1.4 and jQuery <= 2.0.
Q: Player active (JS events applied, buttons respond when clicked), but won't
play
A1: Check that the browser and platform you're testing with is able to play the
files you're giving it when given a direct link. For example, some Linux-based
platforms have no support for mp3 file playback out of the box.
A2: See http://jplayer.org/ for supported file formats.
Q: Which versions of the jPlayer library are known to work with the module?
A1: The Drupal 7 jplayer module has been tested against jPlayer version 2.9.2.