Video by Topic Simple

This plugin is free and open source. You can download, fork it, add new features and suggest something to me via GitHub.

To get it this plugin, you can use the icons below or you can go to http://github.com/vebersol/jQPlayer/ and have fun!

The plugin comes with css files (also sass source files) and the swd file used for fallback in browsers that doesn't support HTML5 video.

Download Plugin View Source Code

jQPlayer is a jQuery plugin. It has been made in order to provide some advantages never seen on most popular plugins.

Advantages

• More customizable options;
• Custom 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.

jQPlayer is a jQuery plugin. It has been made in order to provide some advantages never seen on most popular plugins.

<!-- 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>
					

---

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'
	}
}
					

---