Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/vebersol/jqplayer
A custom HTML5 video player plugin for jQuery.
https://github.com/vebersol/jqplayer
Last synced: 3 months ago
JSON representation
A custom HTML5 video player plugin for jQuery.
- Host: GitHub
- URL: https://github.com/vebersol/jqplayer
- Owner: vebersol
- Created: 2011-12-13T15:28:11.000Z (about 13 years ago)
- Default Branch: master
- Last Pushed: 2013-08-20T16:15:49.000Z (over 11 years ago)
- Last Synced: 2023-04-12T04:26:43.976Z (almost 2 years ago)
- Language: JavaScript
- Homepage:
- Size: 2.11 MB
- Stars: 14
- Watchers: 3
- Forks: 13
- Open Issues: 1
-
Metadata Files:
- Readme: README.markdown
Awesome Lists containing this project
README
# jQPlayer - HTML 5 Video Player Plugin for jQuery
A jQuery plugin to build custom HTML5 video players.
The main features of this plugin include the ability to customize the player controls and the ability to choose different quality versions of the same video.
Demo: http://jqplayer.vebersol.net/
# Advantages
* More customizable options;
* Callback events for common actions like play, pause, end, etc;
* Custom buttons to add to your player bar;
* Possibility to add different versions (sd, hd) for the same video;
* Flash fallback
* Easy setup.
# Usage
```html
$(function() {
var options = {
videos: {
standard: {
source: {
mp4: 'movie.mp4',
webm: 'movie.webm'
},
label: 'SD'
}
}
};
$('#video-element').jQPlayer(options);
});
```
# API
#### $.jQPlayer(options)
This method is used to build the player.
##### Options
* **controls:** (Array)
Set and order all available and custom controls.
By removing one of them, you will hide it from player.
*Default value: ['play', 'progress', 'time', 'volume', 'fullscreen', 'alternative']*
* **controlsClass:** (String)
Add a custom class to video player controls.
*Default value: 'video-controls'*
* **customButtons:** (Object)
An object that receives all custom buttons.
*Default value: {}*
* **defaultVideo:** (String)
Set the default video to be loaded on initialization.
*Default value: 'standard'*
* **floatControls:** (Boolean)
To be defined.
*Default value: false*
* **onEnd:** (Function)
A function that will be executed on video end.
*Default value: false*
* **onPause:** (Function)
A function that will be executed on video pause.
*Default value: false*
* **onPlay:** (Function)
A function that will be executed on video play.
*Default value: false*
* **onSeek:** (Function)
A function that will be executed on video seek.
*Default value: false*
* **onStart:** (Function)
A function that will be executed on video start.
*Default value: false*
* **onVideoChange:** (Function)
A function that will be executed on video change.
*Default value: false*
* **prefix:** (String)
A prefix to add for all used classes on the used HTML.
*Default value: 'html-player-'*
* **timeSeparator:** (String)
A saparator to be used between current time and duration time.
*Default value: '/'*
* **fallbackOptions:** (String)
Define the relative path to get videos and the swf path to embed the flash file.
*Default values: {*
*relativePath: '../',*
*movie: 'media/jQPlayer.swf'*
*}*
##### Deprecated
* **videoId:** (String)
Video element will assume an id like 'videoId' + incremental integer.
*Default value: 'video-'*
*It have been removed, since the way to build player has changed.*
# How to setup a custom button
You can setup custom buttons by adding the following property to your options object:
```javascript
customButtons: {
'custom_button_1': {
url: 'http://jqplayer.vebersol.net',
label: 'TEST',
className: 'custom-button-1',
target: '_blank'
},
'custom_button_2': {
label: 'TEST',
className: 'custom-button-1',
onclick: function() {
alert('test');
}
}
}
```
# How to setup a video and subtitles
You can add multiple qualities of videos that contain the source (mp4, webm or ogg). The property label will be used as option on quality menu.
And finally, subtitle will be the path to srt file.
```javascript
videos: {
p720: {
source: {
mp4: 'media/sample720p.mp4',
webm: 'media/sample720p.webm'
},
label: '720p',
subtitle: 'media/subtitles.srt'
},
p360: {
source: {
mp4: 'media/sample360p.mp4',
webm: 'media/sample360p.webm'
},
label: '360p',
subtitle: 'media/subtitles.srt'
}
}
```
# Fallback - Flash support
Now jQPlayer supports browsers that can't play HTML5 video. By adding a flash fallback using the same HTML structure generated by jQPlayer's for modern browsers.
# Developers
This plugin has been developed by [Vinícius Ebersol][ve].
[Thiago Reis][tr] designed the concept and final layout of this player.
# Contributing
If you want to contribute, please feel free, we encourage you to do this.
# License
MIT License - http://www.opensource.org/licenses/MIT
# Reporting bugs
Any bug report, please, see this link: https://github.com/vebersol/jQPlayer/issues
[ve]: http://vebersol.net
[tr]: http://www.thiagoreis.com/
[logo]: http://vebersol.net/logo.jpg