HTML / CSS

jQueryプラグイン「jPlayer」でオリジナルプレイリストを作ってみた
  • 公開日時
  • タグ
jplayer
HTML5でサイト内で音を鳴らしたり、動画を埋め込んだりできるjQueryプラグイン「jPlayer」を使ってプレイリストを作ってみました。「jPlayer」の基本的な使い方がわからない方はサイト内で音楽や効果音を鳴らすjQueryプラグイン「jPlayer」の使い方をご覧下さい。

ダウンロードと配置

jPlayerのバージョンはjPlayer-2.9.2を使用しました。プレイリストを作る場合はダウンロードしてきたファイルの「jquery.jplayer.min.js」と「jquery.jplayer.swf」に合わせてadd-onフォルダに入ってる「jplayer.playlist.min.js」を使いますのでjQueryと合わせて<head>内などで読み込みます。

jPlayer Downloadページ

<head>
・・・省略・・・
<style rel='stylesheet' href="//cdnjs.cloudflare.com/ajax/libs/jplayer/2.9.2/skin/pink.flag/css/jplayer.pink.flag.min.css" type="text/css">
	
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jplayer/2.9.2/jplayer/jquery.jplayer.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jplayer/2.9.2/add-on/jplayer.playlist.min.js"></script>
</head>

「jPlayer」プレイリストのセッティング

プレイリストを作るためのセッティングをしていきます。単体のオーディオプレイヤーと一緒で audio タグが入る要素とインターフェース部分を作ってあげればOKです。

HTML

<div id="jp_container_N" class="jp-video jp-video-270p" role="application" aria-label="media player">
	<div class="jp-type-playlist">
		<div id="jquery_jplayer_N" class="jp-jplayer"></div>
		<div class="jp-gui">
			<div class="jp-video-play">
				<button class="jp-video-play-icon" role="button" tabindex="0">play</button>
			</div>
			<div class="jp-interface">
				<div class="jp-progress">
					<div class="jp-seek-bar">
						<div class="jp-play-bar"></div>
					</div>
				</div>
				<div class="jp-current-time" role="timer" aria-label="time">&nbsp;</div>
				<div class="jp-duration" role="timer" aria-label="duration">&nbsp;</div>
				<div class="jp-details">
					<div class="jp-title" aria-label="title">&nbsp;</div>
				</div>
				<div class="jp-controls-holder">
					<div class="jp-volume-controls">
						<button class="jp-mute" role="button" tabindex="0">mute</button>
						<button class="jp-volume-max" role="button" tabindex="0">max volume</button>
						<div class="jp-volume-bar">
							<div class="jp-volume-bar-value"></div>
						</div>
					</div>
					<div class="jp-controls">
						<button class="jp-previous" role="button" tabindex="0">previous</button>
						<button class="jp-play" role="button" tabindex="0">play</button>
						<button class="jp-stop" role="button" tabindex="0">stop</button>
						<button class="jp-next" role="button" tabindex="0">next</button>
					</div>
					<div class="jp-toggles">
						<button class="jp-repeat" role="button" tabindex="0">repeat</button>
						<button class="jp-shuffle" role="button" tabindex="0">shuffle</button>
						<button class="jp-full-screen" role="button" tabindex="0">full screen</button>
					</div>
				</div>
			</div>
		</div>
		<div class="jp-playlist">
			<ul>
				<!-- The method Playlist.displayPlaylist() uses this unordered list -->
				<li></li>
			</ul>
		</div>
		<div class="jp-no-solution">
			<span>Flash Playerのアップデートが必要です</span>
			再生するにはFlash Playerを最新のバージョンにしてください。<a href="http://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>.
		</div>
	</div>
</div>

シェア

コメント