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

<!-- Add jQuery and the plugin file in your HTML page -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript"></script>
<script src="jquery-jqplayer-0.5.0.js" type="text/javascript"></script>

<!-- Create an HTML element -->
<div id="video-element"><!-- --></div>

<!-- Setup the plugin and enjoy yourself! -->
<script type="text/javascript">
  $(function() {
  	
		var options = {
			videos: {
				standard: {
					source: {
						mp4: 'movie.mp4',
						webm: 'movie.webm'
					},
					label: 'SD'
				}
			}
		};
		
		$('#video-element').jQPlayer(options);
	});
</script>

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:

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.

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.

Thiago Reis 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

vebersol / jQPlayer