Clean jPlayer Skin
Documentation

Contents

Clean jPlayer skin includes a function that allows extremely easy deployment of the player. You don't need to set it up as original jPlayer its much easier than that. I will show you ways to use this function & skin within your web site using my function or original jPlayer function. Note: I have issues with my web server streaming video so I've used flash solution in examples. If you don't have flash and you are using chrome, you might have issues streaming videos.

Features
  • Easy to get started, deploy in minutes
  • lightweight - only 10KB minified and Gzipped
  • Extensive platform support - multi-codec, cross-browser and cross-platform
  • Extensible architecture
Platforms and Browsers
  • Windows: Firefox, Chrome, Opera, Safari, IE9, IE10+
  • OSX: Safari, Firefox, Chrome, Opera
  • iOS: Mobile Safari: iPad, iPhone, iPod Touch
  • Android 2.3+: Chrome, Firefox, Opera and most other mobile browsers
  • Blackberry: OS 7 Phone Browser, PlayBook Browser
Media Support
  • HTML5: mp3, mp4 (AAC/H.264), ogg (Vorbis/Theora), webm (Vorbis/VP8), wav
  • Flash: mp3, mp4 (AAC/H.264), rtmp, flv
Included Files
Before we start with deployment, lets see what is included with Clean jPlayer skin:
  • jquery-1.10.2.min.js: Latest jQuery version compatable with IE5+
  • jquery.jplayer.js: Minified version of jPlayer 2.4.0
  • Jplayer.swf: Flash fallback file for jPlayer 2.4.0
  • jplayer.cleanskin.js: Minified jquery NOUI slider (http://refreshless.com/nouislider/) and my function to ease jPlayer deployment process.
  • player.css: Stylesheet to deploy Dark version of Clean jPlayer skin (Classes are named the way it won't interupt current site design)
  • player.light.css: Stylesheet to deploy Light version of jPlayer skin (Classes are named the way it won't interupt current site design)
  • playerUI.png: Image sprite required for Dark version of skin (3kb)
  • playerUI.light.png: Image sprite required for Light version of skin (3kb)
  • preimg.png: Play icon for overlay (Dark Version of skin)
  • preimg.light.png: Play icon for overlay (Light Version of skin)
  • example.html: Example file to ease up your first deployment
  • example.jpg: Snapshot of example movie included
  • example.mp4: Example movie file included MP4 format (Credits go to Big Buck Bunny team: http://www.bigbuckbunny.org/)
Simple Deployment of Clean jPlayer
Function I developed allows you to deploy multi-instanced jPlayer with use of JSON. That allows you to deploy multi-videos on single page using PHP, ASP.net, Python, Perl and so on.
It could also be easly intergrated into WordPress, Joomla and other CMS systems. See bellow the example of such use.

<!DOCTYPE html>
	<html lang="en">
		<head>
			<meta charset="utf-8">
			<title>Clean jPlayer skin: Example</title>
			<link rel="stylesheet" href="/projects/clean-jplayer-skin/player.css">
			<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
			<script type="text/javascript" src="/projects/clean-jplayer-skin/jquery.jplayer.js"></script>
			<script type="text/javascript" src="/projects/clean-jplayer-skin/jplayer.cleanskin.min.js"></script>
			<script type="text/javascript">
				$(document).ready(function(){
					$(document).find('.webPlayer').each(function() { $('#'+this.id).videoPlayer(); });
				});
			</script>
		</head>
		<body>
			<div id="uniquePlayer-1" class="webPlayer light">
				<div id="uniqueContainer-1" class="videoPlayer"></div>
				<div style="display:none;" class="playerData">
				// JSON string here
					{
					"name": "Tomorrowland 2013 - Aftermovie",
						"size": {
							"width": "1280px",
							"height": "720px"
						},
						"media": {
							"m4v": "\/projects\/clean-jplayer-skin\/Tomorrowland_2013_official_aftermovie.mp4",
							"poster": "\/projects\/clean-jplayer-skin\/Tomorrowland_2013_official_aftermovie.jpg"
						}
					}
				</div>
			</div>
		</body>
</html>
Advanced Deployment

If you feel that site javascript performance is bad with multi-instanced jQuery script you can also use a simple command to deploy player using pure Javascript. It only requires 2 divs to be set in DOM of document (html) and that's it. This way also allows you to access jPlayer object settings. See example bellow to understand what I mean:


<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Clean jPlayer skin: Example</title>
		<link rel="stylesheet" href="/projects/clean-jplayer-skin/player.css">
		<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
		<script type="text/javascript" src="/projects/clean-jplayer-skin/jquery.jplayer.js"></script>
		<script type="text/javascript" src="/projects/clean-jplayer-skin/jplayer.cleanskin.min.js"></script>
		<script type="text/javascript">
			$(document).ready(function() {

				$('.webPlayer').videoPlayer({
					name: 'Tomorrowland Official Aftermovie 2013',
					media: {
						m4v: '/projects/clean-jplayer-skin/Tomorrowland_2013_official_aftermovie.mp4',
						poster: '/projects/clean-jplayer-skin/Tomorrowland_2013_official_aftermovie.mp4'
					},

					size: {
						width: '1280px',
						height: '720px'
					},

					// These go directly to jPlayer object, allowing you to rewrite any player setting
					loadstart: function() {
						alert('Video loading started!');
					}

				});

			});
		</script>
	</head>
	<body>
		<div id="uniquePlayer-1" class="webPlayer light">
			<div id="uniqueContainer-1" class="videoPlayer"></div>
		</div>
	</body>
</html>
Manual jPlayer deployment with Clean jPlayer skin

I do not recommend this, but if you require some custom modification of jPlayer this is the way to go.
Since this skin uses slider plugin and some other modifications the following is required to work properly. See example bellow.


<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Clean jPlayer skin: Example</title>
		<link rel="stylesheet" href="/projects/clean-jplayer-skin/player.css">
		<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
		<script type="text/javascript" src="/projects/clean-jplayer-skin/jquery.jplayer.js"></script>
		<script type="text/javascript" src="/projects/clean-jplayer-skin/jplayer.cleanskin.min.js"></script>
		<script type="text/javascript">
			$(document).ready(function() {

				var media = { m4v: '/projects/clean-jplayer-skin/Tomorrowland_2013_official_aftermovie.mp4', poster: '/projects/clean-jplayer-skin/Tomorrowland_2013_official_aftermovie.mp4' }
				var options = {

					ready: function () {
						$(this).jPlayer("setMedia", media);
					},

					// Extra Settings
					swfPath: "/img/jplayer.swf",
					supplied: 'm4v',
					solution: 'html, flash',
					volume: 0.5,
					size: size,
					smoothPlayBar: false,
					keyEnabled: true,

					// CSS Selectors
					cssSelectorAncestor: '.playerGUI',
					cssSelector: {
						videoPlay: ".video-play",
						play: ".play",
						pause: ".pause",
						seekBar: ".seekBar",
						playBar: ".playBar",
						volumeBar: ".currentVolume",
						volumeBarValue: ".currentVolume .curvol",
						currentTime: ".time.current",
						duration: ".time.duration",
						fullScreen: ".fullScreen",
						restoreScreen: ".fullScreenOFF",
						gui: ".controls",
						noSolution: ".noSolution"
					},

					error: function(event) {
						if(ready && event.jPlayer.error.type === $.jPlayer.error.URL_NOT_SET) {
							// Setup the media stream again and play it.
							$(this).jPlayer("setMedia", media).jPlayer('play');
						}
					},

					play: function() {
						$('#player1 .video-play').fadeOut();
						$(this).on('click', function() { $('#player1').jPlayer('pause');});
						$(this).jPlayer("pauseOthers");
					},

					pause: function() {
						$('#player1 .video-play').fadeIn();
						$('#player1 .playerScreen').unbind('click');
					},

					volumechange: function(event) {
						if(event.jPlayer.options.muted) {
							$('#player1 .currentVolume').val(0);
						} else {
							$('#player1 .currentVolume').val(event.jPlayer.options.volume);
						}
					},

					timeupdate: function(event) {
						$('#player1 .seekBar').val(event.jPlayer.status.currentPercentRelative);
					},

					ended: function() {
						$(this).jPlayer("setMedia", media);
					}


				};

				// Create the volume slider control
				$('#player1 .currentVolume').slider({
					range: [0, 1],
					step: 0.01,
					start : 0.5,
					handles: 1,
					slide: function() {
						var value = $(this).val();
						$(mainPlayer).jPlayer("option", "muted", false);
						$(mainPlayer).jPlayer("option", "volume", value);
						$('#player1 .volumeText').html('Volume: ' + (value * 100).toFixed(0) + '');
					}
				});

				$('#player1 .seekBar').slider({
					range: [0,100],
					step: 0.01,
					start: 0,
					handles: 1,
					slide: function() {
						var value = $(this).val();
						$('#player1').jPlayer("playHead", value);
					}
				});

				// Initialize Player
				$('#player1').jPlayer(options);

			});
		</script>
	</head>
	<body>
		<div id="player1" class="playerGUI">
			<div id="videoPlayer"></div>
			<div class="playerScreen">
				<a tabindex="1" href="#" class="video-play"></a>
			</div>
			<div class="controls">
				<div class="leftblock">
					<a tabindex="1" href="#" class="play smooth"></a>
					<a tabindex="1" href="#" class="pause smooth"></a>
				</div>
				<div class="play-progress">
					<span>Tomorrowland 2013 - Aftermovie</span>
					<div class="progressbar">
						<div class="seekBar">
							<div class="playBar"></div>
						</div>
					</div>
					<div class="time current">00:00</div>
					<div class="time duration">00:00</div>
				</div>
				<div class="rightblock">
					<div class="volumeBar">
						<div class="currentVolume"><div class="curvol"></div></div>
					</div>
					<a class="volumeText">Volume: 50</a>
					<a href="#" tabindex="1" class="fullScreen smooth"></a>
					<a href="#" tabindex="1" class="fullScreenOFF smooth"></a>
				</div>
			</div>
		</div>
	</body>
</html>
Audio Player

Using this skin as Audio player is rather easy. When deploying don't specify height for the jPlayer and append class "audioPlayer" to main DIV. See example bellow:


<!DOCTYPE html>
	<html lang="en">
		<head>
			<meta charset="utf-8">
			<title>Clean jPlayer skin: Example</title>
			<link rel="stylesheet" href="/projects/clean-jplayer-skin/player.css">
			<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
			<script type="text/javascript" src="/projects/clean-jplayer-skin/jquery.jplayer.js"></script>
			<script type="text/javascript" src="/projects/clean-jplayer-skin/jplayer.cleanskin.min.js"></script>
			<script type="text/javascript">
				$(document).ready(function(){
					$(document).find('.webPlayer').each(function() { $('#'+this.id).videoPlayer(); });
				});
			</script>
		</head>
		<body>
			<div id="uniquePlayer-1" class="webPlayer light audioPlayer">
				<div id="uniqueContainer-1" class="videoPlayer"></div>
				<div style="display:none;" class="playerData">
				// JSON string here
					{
					"name": "Dj Jacky - HouseFire XXIII (2013)",
						"size": {
							"width": "600px",
						},
						"media": {
							"mp3": "\/projects\/clean-jplayer-skin\/Dj Jacky - HouseFire XXIII (2013).mp3",
						}
					}
				</div>
			</div>
		</body>
</html>