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 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.
<!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>
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>
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="left-block">
<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="right-block">
<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>
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>