Skip to content

Instantly share code, notes, and snippets.

@KuninoriKunimoto

KuninoriKunimoto/bootstrap_jpalyer.html

Created March 11, 2014 11:59
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save KuninoriKunimoto/9484267 to your computer and use it in GitHub Desktop.
Save KuninoriKunimoto/9484267 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
bootstrap_jpalyer.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jPlayer for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="assets/css/bootstrap.css" rel="stylesheet">
<!-- Custom CSS Assets -->
<link href="assets/css/scojs.css" rel="stylesheet">
<link rel="stylesheet" href="assets/css/jquery.fs.picker.css">
<link href="assets/css/jquery.fs.selecter.css" rel="stylesheet">
<link rel="stylesheet" href="assets/css/jquery.fs.scroller.css">
<link rel="stylesheet" href="assets/css/font-awesome.css">
<link href="assets/css/theme.css" rel="stylesheet">
<!-- jPlayer CSS Assets -->
<link href="assets/css/jplayer_bootstrap.css" rel="stylesheet">
<!-- javascript -->
<script src="assets/js/jquery-1.11.0.min.js"></script>
<script src="assets/js/jquery.fs.selecter.js"></script>
<script src="assets/js/jquery.fs.picker.js"></script>
<script src="assets/js/jquery.fs.scroller.js"></script>
<script src="assets/js/bootstrap.js"></script>
<!-- /Javascript -->
<!-- jPlayer JS -->
<script src="assets/js/jquery.jplayer.min.js"></script>
<script>
$(document).ready(function(){
var myPlaylist = new jPlayerPlaylist({
jPlayer: "#jquery_jplayer_1",
cssSelectorAncestor: "#jp_container_1"
}, [
{
title: "sample music",
artist: "sample artist",
mp3: "sample_music.mp3"
}
], {
playlistOptions: {
enableRemoveControls: true
},
supplied: "mp3",
smoothPlayBar: true,
keyEnabled: true,
audioFullScreen: true
});
});
</script>
<!-- /jPlayer JS -->
</head>
<body>
<!-- /Wrap -->
<div id="wrap">
<div class="container">
<div id="jquery_jplayer_1" class="jp-jplayer"></div>
<div id="jp_container_1" class="jp-audio">
<div class="jp-type-playlist">
<div class="row">
<div class="jp-gui jp-interface col-md-4 col-sm-4">
<ul class="jp-controls">
<li><a href="javascript:;" class="jp-previous btn btn-default btn-sm" tabindex="1"><span class="glyphicon glyphicon-backward"></span></a></li>
<li><a href="javascript:;" class="jp-play btn btn-default btn-sm" tabindex="1"><span class="glyphicon glyphicon-play"></span></a></li>
<li><a href="javascript:;" class="jp-pause btn btn-default btn-sm" tabindex="1"><span class="glyphicon glyphicon-pause"></span></a></li>
<li><a href="javascript:;" class="jp-next btn btn-default btn-sm" tabindex="1"><span class="glyphicon glyphicon-forward"></span></a></li>
<li><a href="javascript:;" class="jp-stop btn btn-default btn-sm" tabindex="1"><span class="glyphicon glyphicon-stop"></span></a></li>
<li><a href="javascript:;" class="jp-shuffle btn btn-default btn-sm" tabindex="1" title="shuffle the playlist"><span class="glyphicon glyphicon-random"></span></a></li>
<li><a href="javascript:;" class="jp-shuffle-off btn btn-default btn-sm" tabindex="1" title="shuffle the playlist"><span class=" glyphicon glyphicon-random"></span></a></li>
<li><a href="javascript:;" class="jp-repeat btn btn-default btn-sm" tabindex="1" title="repeat"><span class="glyphicon glyphicon-arrow-down"></span></a></li>
<li><a href="javascript:;" class="jp-repeat-off btn btn-default btn-sm" tabindex="1" title="repeat off"><span class="glyphicon glyphicon-repeat"></span></a></li>
<br/>
<li><a href="javascript:;" class="jp-mute btn btn-default btn-sm" tabindex="1" title="mute"><span class="glyphicon glyphicon-volume-off"></span></a></li>
<li><a href="javascript:;" class="jp-unmute btn btn-default btn-sm" tabindex="1" title="unmute"><span class="glyphicon glyphicon-volume-down"></span></a></li>
<li>
<div class="jp-volume-bar progress">
<div class="jp-volume-bar-value progress-bar progress-bar-success"></div>
</div>
</li>
<li>
<a href="javascript:;" class="jp-volume-max btn btn-default btn-sm" tabindex="1" title="max volume"><span class="glyphicon glyphicon-volume-up"></span></a>
</li>
</ul>
<div class="jp-progress">
<div class="jp-seek-bar progress">
<div class="jp-play-bar progress-bar"></div>
</div>
</div>
<div id="time">
<div class="jp-current-time badge"></div>
<div class="jp-duration badge"></div>
</div>
</div>
<div class="jp-playlist col-md-8 col-sm-8">
<ul><li></li></ul>
</div>
</div>
</div>
</div>
<!-- /jPlayer -->
</div>
<!-- /.container -->
</div>
<!-- /Wrap -->
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment