https://github.com/jplayer/jplayer.injector
Injects jPlayer's skin HTML and instantiates the plugin.
https://github.com/jplayer/jplayer.injector
Last synced: about 1 year ago
JSON representation
Injects jPlayer's skin HTML and instantiates the plugin.
- Host: GitHub
- URL: https://github.com/jplayer/jplayer.injector
- Owner: jplayer
- License: mit
- Created: 2013-09-22T19:27:55.000Z (over 12 years ago)
- Default Branch: master
- Last Pushed: 2015-12-23T17:19:04.000Z (over 10 years ago)
- Last Synced: 2024-04-17T05:22:27.471Z (about 2 years ago)
- Language: JavaScript
- Size: 342 KB
- Stars: 9
- Watchers: 6
- Forks: 5
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
#jPlayer.injector
* Injects jPlayer's skin HTML and instantiates the plugin.
* Automates the creation of HTML and unique IDs for jPlayer.
* Supports multiple supplied formats. EG., MP3 and OGA (ogg)
*Inspired by [Nathan Loyer's](https://github.com/namlet) project: [jPlayer-Autofill](https://github.com/namlet/jPlayer-Autofill).*
##To use *injector*
* Include the skin CSS files:
```html
```
* Include *injector* files after jPlayer:
```html
```
* Insert the HTML tags where you want the media to appear as follows:
```html
```
* Call *injector* from JavaScript:
```javascript
jPlayerInjector({
selector: ".classname",
template: "path/to/template.html"
});
```
* The *injector* has many options:
```javascript
jPlayerInjector({
selector: ".classname",
template: "path/to/template.html",
pauseOthers: true, // Stop multiple instances playing
marker: { // RegExp of markers
jPlayer: /::JPLAYER::/,
cssSelectorAncestor: /::WRAPPER::/,
title: /::TITLE::/
},
prefix: { // Prefix of IDs
jPlayer: "jquery_jplayer_",
cssSelectorAncestor: "jp_container_"
},
jPlayer: {} // jPlayer options
});
```
* Typically, you will call *injector* from within a jQuery ready function:
```javascript
$(document).ready(function() {
jPlayerInjector({
selector: ".audio",
template: "path/to/audio_template.html"
});
});
```
* Example code is given in the root HTML files, and are of the form:
```html
My Sweet Music
$(document).ready(function() {
jPlayerInjector({
selector: ".audio",
template: "skin/pink.flag/jplayer.pink.flag.audio.html",
jPlayer: {
swfPath: "lib"
}
});
});
```
##FAQ
###Why does my template not work?
There could be many reason, so consider:
* Check the selector matches the class name you used.
* Check the markers in the template match the injector's defaults or the options you set.
* Check that you included the skin's CSS in your page.
* Check you included jQuery and jPlayer in your page.
* Check you only included jQuery once.
* Check that your template is on the same domain.
* Look in the browser console and see if there are any error messages.
###How do I specify multiple formats to satisfy HTML5 browsers?
These days you tend to only need either **MP3** or **M4A** for audio and **M4V** for video.
The [essential formats](http://jplayer.org/latest/developer-guide/#jPlayer-essential-formats) and optional counterpart formats follow those detailed in the [jPlayer dev guide](http://jplayer.org/latest/developer-guide/).
You can add them using:
```html
```
###Why is the JavaScript in 2 places?
That is purely to distinguish between the JavaScript being developed in this project and those that are part of other projects.
The *jPlayer.injector* code is in the `js` folder, while the external JavaScript libraries are in the `lib` folder.
###Why does this not work with jPlayer 2.5.0?
Yes that is a problem.
During the development of jPlayer, a bug slipped in at jPlayer 2.4.2 that conflicted with this project.
This bug was fixed in jplayer 2.5.4 and it has been updated in this project.
(Or to the latest jPlayer version since 2.5.4)