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 website 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.
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>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>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>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="jp-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>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>