Flatie Jplayer skin includes jquery function that allows extreme easy deployment, I very much encourage you to use it!.
The included function adds functionality like audio/video player switch, dragable volume & seek bars, video overlay, responsive flash video and others.
Deployment code mentioned above, 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.
Deploy using Normal Javascript:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Flatie - Jplayer Skin</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="skin/jquery-1.10.1.min.js"></script>
<link href="skin/flatie.jplayer.skin.css" media="screen" rel="stylesheet" type="text/css">
<script type="text/javascript" src="skin/jquery.jplayer.min.js"></script>
<script type="text/javascript" src="skin/flatie.jplayer.skin.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#player1').flatie({
media: {
title: "Big Buck Bunny Trailer",
m4v: "Big_Buck_Bunny_Trailer.mp4",
poster: "Big_Buck_Bunny_Trailer.jpg"
},
solution: 'html, flash',
autoplay: true
});
});
</script>
</head>
<body style="font-family: 'Segoe UI', Verdana; background: #f9f9f9;">
<div style="display: block; margin: 0 auto; max-width: 960px;">
<!-- Player Container Div -->
<div id="player1" class="jPlayer light"></div>
</div>
</body>
</html>Deploy using JSON strings (E.g.: PHP json_encode function inside playerData div)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Flatie - Jplayer Skin</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="skin/jquery-1.10.1.min.js"></script>
<link href="skin/flatie.jplayer.skin.css" media="screen" rel="stylesheet" type="text/css">
<script type="text/javascript" src="skin/jquery.jplayer.min.js"></script>
<script type="text/javascript" src="skin/flatie.jplayer.skin.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(document).find('.jPlayer').each(function() {
$('#'+this.id).flatie({
solution: 'html, flash'
// Any other jplayer options
});
});
});
</script>
</head>
<body style="font-family: 'Segoe UI', Verdana; background: #f9f9f9;">
<div style="display: block; margin: 0 auto; max-width: 960px;">
<!-- Player Container Div -->
<div id="player1" class="jPlayer light">
<div style="display:none;" class="playerData">
{
"media": {
"m4v": "Big_Buck_Bunny_Trailer.mp4",
"poster": "Big_Buck_Bunny_Trailer.jpg"
}
}
</div>
</div>
</div>
</body>
</html>Deplyoing audio player is as easy as just adding class audioPlayer to the jPlayer div, see bellow example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Flatie - Jplayer Skin</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="skin/jquery-1.10.1.min.js"></script>
<link href="skin/flatie.jplayer.skin.css" media="screen" rel="stylesheet" type="text/css">
<script type="text/javascript" src="skin/jquery.jplayer.min.js"></script>
<script type="text/javascript" src="skin/flatie.jplayer.skin.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#player1').flatie({
media: {
title: "Big Buck Bunny Trailer",
m4v: "Big_Buck_Bunny_Trailer.mp4",
poster: "Big_Buck_Bunny_Trailer.jpg"
},
solution: 'html, flash',
autoplay: true
});
});
</script>
</head>
<body style="font-family: 'Segoe UI', Verdana; background: #f9f9f9;">
<div style="display: block; margin: 0 auto; max-width: 960px;">
<!-- Player Container Div -->
<div id="player1" class="jPlayer audioPlayer light"></div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Flatie - Jplayer Skin</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="skin/jquery-1.10.1.min.js"></script>
<link href="skin/flatie.jplayer.skin.css" media="screen" rel="stylesheet" type="text/css">
<script type="text/javascript" src="skin/jquery.jplayer.min.js"></script>
<script type="text/javascript" src="skin/flatie.jplayer.skin.min.js"></script>
<script type="text/javascript">
// Responsive Flash
function jplayer_responsive() {
$('.jPlayer[class!=audioPlayer] object').each(function() {
var width = $(this).width();
$(this).height(width / 1.778);
});
}
$(document).ready(function() {
$('#unique-container-1').jPlayer({
// Extra Settings
swfPath: "skin/Jplayer.swf",
solution: 'html, flash',
volume: '0.5',
smoothPlayBar: false,
keyEnabled: true,
remainingDuration: false,
toggleDuration: false,
errorAlerts: false,
warningAlerts: false,
supplied: 'm4v, poster',
// CSS Selectors
size: {
width: "100%",
height: "auto"
},
cssSelectorAncestor: '#player1',
cssSelector: {
videoPlay: ".video-play",
play: ".play",
pause: ".pause",
seekBar: ".seekBar",
playBar: ".playBar",
mute: ".right-volume .mute",
unmute: ".right-volume .unmute",
volumeBar: ".volume-control",
volumeBarValue: ".volume-control .volume-value",
currentTime: ".timer.current",
duration: ".timer.duration",
fullScreen: ".fullscreen",
restoreScreen: ".smallscreen",
gui: ".controls",
noSolution: ".noSolution"
},
ready: function (event) {
if(event.jPlayer.status.noVolume) {
// Add a class and then CSS rules deal with it.
$('#player1').find(".controls .progress-block").css({ margin: '0 10px 0 45px'});
}
$(this).jPlayer("setMedia", {
title: "Big Buck Bunny Trailer",
m4v: "Big_Buck_Bunny_Trailer.mp4",
poster: "Big_Buck_Bunny_Trailer.jpg"
});
},
error: function(event) {
if(event.jPlayer.error.type === $.jPlayer.error.URL_NOT_SET) {
// Setup the media stream again and play it.
$(this).jPlayer("setMedia", {
title: "Big Buck Bunny Trailer",
m4v: "Big_Buck_Bunny_Trailer.mp4",
poster: "Big_Buck_Bunny_Trailer.jpg"
});
}
},
play: function() {
$('#player1').find('.playerScreen .video-play').stop(true,true).fadeOut(150);
$(this).on('click', function() { $(this).jPlayer('pause');});
$(this).jPlayer("pauseOthers");
jplayer_responsive();
},
pause: function() {
$('#player1').find('.playerScreen .video-play').stop(true,true).fadeIn(350);
$(this).unbind('click');
},
ended: function() {
$(this).jPlayer("setMedia", {
title: "Big Buck Bunny Trailer",
m4v: "Big_Buck_Bunny_Trailer.mp4",
poster: "Big_Buck_Bunny_Trailer.jpg"
});
}
});
$(window).on('resize', jplayer_responsive);
});
</script>
</head>
<body style="font-family: 'Segoe UI', Verdana; background: #f9f9f9;">
<div style="display: block; margin: 0 auto; max-width: 960px;">
<!-- Player Container Div -->
<div id="player1" class="jPlayer">
<div class="playerScreen">
<div id="unique-container-1" class="jPlayer-container"></div>
<a tabindex="1" href="#" class="video-play"><div class="play-icon"><i class="icon-play-circle"></i></div></a>
</div>
<div class="controls">
<div class="control-set left">
<a tabindex="1" href="#" class="play smooth"><i class="icon-play"></i></a>
<a tabindex="1" href="#" class="pause smooth"><i class="icon-pause"></i></a>
</div>
<div class="control-set right-volume">
<a tabindex="1" href="#" class="mute smooth"><i class="icon-volume"></i></a>
<a tabindex="1" href="#" class="unmute smooth"><i class="icon-mute"></i></a>
</div>
<div class="volume-block">
<div class="volume-control"><div class="volume-value"></div></div>
</div>
<div class="control-set right">
<a href="#" tabindex="1" class="fullscreen smooth"><i class="icon-fullscreen"></i></a>
<a href="#" tabindex="1" class="smallscreen smooth"><i class="icon-fullscreen-exit"></i></a>
</div>
<div class="progress-block">
<div class="timer current"></div>
<div class="timer duration"></div>
<div class="jp-progress">
<div class="seekBar">
<div class="playBar"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>You can compile your own color schemes by editing few lines of code in flatie.jplayer.skin.scss file and than compile it with SASS compiler.
But to make your life easier, I've created a online compiler which you can use bellow.