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">
{
"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'
},
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);
},
swfPath: "/img/jplayer.swf",
supplied: 'm4v',
solution: 'html, flash',
volume: 0.5,
size: size,
smoothPlayBar: false,
keyEnabled: true,
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) {
$(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);
}
};
$('#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);
}
});
$('#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">
{
"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>