YTube
jPlayer Skin - Documentation

Contents

YTube jPlayer skin includes a script 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 YTube jPlayer skin:
  • jquery-1.10.2.min.js: Latest jQuery version compatable with IE5+
  • jquery.jplayer.js: Minified version of jPlayer 2.5.0
  • Jplayer.swf: Flash fallback file for jPlayer 2.5.0
  • jplayer.easydeploy.js: Minified jquery NOUI slider (http://refreshless.com/nouislider/) and my script to ease jPlayer deployment process.
  • ytube.jplayer.css: Stylesheet to deploy Dark & Light version of YTube jPlayer skin (Naming of the stylesheets is done the way it won't interupt current site design)
  • sprite-dark.png: Image sprite required for Dark version of skin (3kb)
  • sprite.png: Image sprite required for Light version of skin (3kb)
  • 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 YTube 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>YTube jPlayer skin: Example</title>
		<link rel="stylesheet" href="ytube.jplayer.css">
		<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
		<script type="text/javascript" src="/projects/ytube-jplayer-skin/jquery.jplayer.js"></script>
		<script type="text/javascript" src="/projects/ytube-jplayer-skin/jplayer.easydeploy.js"></script>
		<script type="text/javascript">
			$(document).ready(function(){
				$(document).find('.mediaPlayer').each(function() { $('#'+this.id).mediaPlayer(); });
			});
		</script>
	</head>
	<body>
		<div id="uniquePlayer-1" class="mediaPlayer">
			<div id="uniqueContainer-1" class="Player"></div>
			<div style="display:none;" class="playerData">
				// JSON string here
				{
					"size": {
						"width": "1280px",
						"height": "720px"
					},
					"media": {
						"m4v": "\/projects\/Tomorrowland_2013_official_aftermovie.mp4",
						"poster": "\/projects\/Tomorrowland_2013_official_aftermovie.jpg"
					}
				}
			</div>
		</div>
	</body>
</html>
Fully featured Deployment of YTube jPlayer

Alright so in this example I've also used JSON encoded string to deploy jPlayer with YTube skin. The difference is that in the "Media" array we've added HD/SD
parent trees which allow my customized script to allow users to choose between SD/HD media quality. SD means that video resolution is at "720×480 pixels", while HD quality is "1280x720 pixels". Once the player is deployed like in example bellow, HD/SD quality button becames hoverable and it starts to do its magic.


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Jacky Prahec | Project YTube jPlayer Skin</title>
		<meta name="description" content="">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">

		<link rel="stylesheet" href="http://prahec.com/template/style.css">
		<link rel="stylesheet" href="/css/youtube.jplayer.css">

		<script src="http://prahec.com/javascript.js"></script>
		<script src="/js/jquery.jplayer.min.js"></script>
		<script src="/js/jplayer.easydeploy.js"></script>

		<script type="text/javascript">
			$(document).ready(function(){
				$(document).find('.mediaPlayer').each(function() { $('#'+this.id).mediaPlayer({ solution: 'html, flash' }); });
			});
		</script>
	</head>

	<body>

		<div id="uniquePlayer-3" class="mediaPlayer">
			<div id="uniqueContainer-3" class="Player"></div>
			<div style="display:none;" class="playerData">
				{
					"name": "Audi A8 review by CarBuyer",
					"size": {
						"width": "1280px",
						"height": "720px"
					},
					"media": {
						"hd": {
							"webmv": "Audi_A8.webm",
							"m4v": "Audi_A8.mp4",
							"poster": "Audi_A8.jpg"
						},
						"sd": {
							"webmv": "Audi_A8_SD.webm",
							"m4v": "Audi_A8_SD.mp4",
							"poster": "Audi_A8_SD.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>YTube jPlayer skin: Example</title>
		<link rel="stylesheet" href="ytube.jplayer.css">
		<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
		<script type="text/javascript" src="/projects/ytube-jplayer-skin/jquery.jplayer.js"></script>
		<script type="text/javascript" src="/projects/ytube-jplayer-skin/jplayer.easydeploy.js"></script>
		<script type="text/javascript">
			$(document).ready(function() {

				$('.mediaPlayer').mediaPlayer({
					media: {
						m4v: 'Tomorrowland_2013_official_aftermovie.mp4',
						poster: '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="mediaPlayer darkskin">
			<div id="uniqueContainer-1" class="Player"></div>
		</div>
	</body>
</html>
Manual jPlayer deployment with YTube 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>YTube jPlayer skin: Example</title>
		<link rel="stylesheet" href="ytube.jplayer.css">
		<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
		<script type="text/javascript" src="/projects/ytube-jplayer-skin/jquery.jplayer.js"></script>
		<script type="text/javascript" src="/projects/ytube-jplayer-skin/jplayer.easydeploy.js"></script>
		<script type="text/javascript">
			$(document).ready(function() {

				var media = { m4v: 'Tomorrowland_2013_official_aftermovie.mp4', poster: '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: '.mediaPlayer',
					cssSelector: {
						cssSelector: {
							videoPlay: ".video-play",
							play: ".play",
							pause: ".pause",
							seekBar: ".seekBar",
							playBar: ".playBar",
							volumeBar: ".currentVolume",
							volumeBarValue: ".currentVolume .curvol",
							currentTime: ".timer .current",
							duration: ".timer .duration",
							fullScreen: ".fullscreen",
							restoreScreen: ".smallscreen",
							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);
						}
					},

				};

				// 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);
					}
				});


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

			});
		</script>
	</head>
	<body>
		<div id="player1" class="mediaPlayer">
			<div id="Player"></div>
			<div class="playerScreen">
				<a tabindex="1" href="#" class="video-play "><div class="play-icon"></div></a>
			</div>
			<div class="controls">
				<div class="progress">
					<div class="seekBar">
						<div class="playBar"></div>
					</div></div>
				<a tabindex="1" href="#" class="play smooth left"></a>
				<a tabindex="1" href="#" class="pause smooth left"></a>
				<div class="seperator left"></div>
				<div class="volumecontrol left"><div class="volumebar"><div class="currentVolume"><div class="curvol"></div></div></div></div>
				<div class="seperator left"></div>
				<div class="timer">
					<div class="current">00:00</div>
					<div class="seperate">/</div>
					<div class="duration">00:00</div>
				</div>
				<div class="seperator left"></div>
				<a href="#" tabindex="1" class="fullscreen smooth right"></a>
				<a href="#" tabindex="1" class="smallscreen smooth right"></a>
				<div class="seperator right"></div>
				<a class="hd-video disabled right smooth" href="#"></a><div class="seperator right"></div>
			</div>
		</div>
	</body>
</html>
Audio Player

Using this skin as Audio player is easy. When deploying only append class "audioPlayer" to mediaPlayer div. See example bellow:


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