音楽再生用jQueryプラグイン「jplayer」でMP3を再生させるプレイリスト表示にて
自動再生させたいのですが、うまくできません。
同プラグインの1曲だけ再生するプレイヤーでは自動再生が可能なのですが、
こちらのプレイリストの場合、どこで$("#jquery_jplayer_1").jPlayer("play");
または.jPlayer("jp-play");
を指定したらいいのかがわかりません。
公式サイトでのデモも自動再生はしておらず、
ドキュメントもひと通り読みましたが、よくわかりませんでした。
Javascript(jQuery)については、コピー・ペーストでの設置と、
ある程度のカスタマイズが頑張れば出来る程度の初心者なため、
どうしたらいいのか困っています。
どうぞよろしくお願い致します。
自動再生させたいプレーヤーのデモはこちらです
http://jplayer.org/latest/demo-02/
現在のソースはこの通りです(ボタンをクリックしての再生は可能)
<script type="text/javascript">
$(document).ready(function(){
new jPlayerPlaylist({
jPlayer: "#jquery_jplayer_1",
cssSelectorAncestor: "#jp_container_1"
}, [
//ここから音源指定
{
title:"曲名",
mp3:"01.mp3",
oga:"01.ogg"
},
//上記を曲数分繰り返す
],{
swfPath: "js",
supplied: "oga, mp3",
wmode: "window",
smoothPlayBar: true,
keyEnabled: true,
});
});
</script>
<div id="jquery_jplayer_1" class="jp-jplayer"></div>
<div id="jp_container_1" class="jp-audio">
<div class="jp-type-playlist">
<div class="jp-gui jp-interface">
<ul class="jp-controls">
<li><a href="javascript:;" class="jp-previous" tabindex="1">previous</a></li>
<li><a href="javascript:;" class="jp-play" tabindex="1">play</a></li>
<li><a href="javascript:;" class="jp-pause" tabindex="1">pause</a></li>
<li><a href="javascript:;" class="jp-next" tabindex="1">next</a></li>
<li><a href="javascript:;" class="jp-stop" tabindex="1">stop</a></li>
<li><a href="javascript:;" class="jp-mute" tabindex="1" title="mute">mute</a></li>
<li><a href="javascript:;" class="jp-unmute" tabindex="1" title="unmute">unmute</a></li>
<li><a href="javascript:;" class="jp-volume-max" tabindex="1" title="max volume">max volume</a></li>
</ul>
<div class="jp-progress">
<div class="jp-seek-bar">
<div class="jp-play-bar"></div>
</div>
</div>
<div class="jp-volume-bar">
<div class="jp-volume-bar-value"></div>
</div>
<div class="jp-current-time"></div>
<div class="jp-duration"></div>
<ul class="jp-toggles">
<li><a href="javascript:;" class="jp-shuffle" tabindex="1" title="shuffle">shuffle</a></li>
<li><a href="javascript:;" class="jp-shuffle-off" tabindex="1" title="shuffle off">shuffle off</a></li>
<li><a href="javascript:;" class="jp-repeat" tabindex="1" title="repeat">repeat</a></li>
<li><a href="javascript:;" class="jp-repeat-off" tabindex="1" title="repeat off">repeat off</a></li>
</ul>
</div>
<div class="jp-playlist">
<ul>
<li></li>
</ul>
</div>
<div class="jp-no-solution">
<span>Update Required</span>
To play the media you will need to either update your browser to a recent version or update your <a href="http://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>.
</div>
</div>
</div>
No.1ベストアンサー
- 回答日時:
],{
swfPath: "js",
supplied: "oga, mp3",
wmode: "window",
smoothPlayBar: true,
keyEnabled: true,
// ↓ここから
playlistOptions: {
autoPlay: true
}
// ↑ここまで追加
});
これで出来ます。
下記URLがplaylistのドキュメントです。
http://jplayer.org/latest/demo-02-jPlayerPlaylist/
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
- ・ゆるやかでぃべーと タイムマシンを破壊すべきか。
- ・歩いた自慢大会
- ・許せない心理テスト
- ・字面がカッコいい英単語
- ・これ何て呼びますか Part2
- ・人生で一番思い出に残ってる靴
- ・ゆるやかでぃべーと すべての高校生はアルバイトをするべきだ。
- ・初めて自分の家と他人の家が違う、と意識した時
- ・単二電池
- ・チョコミントアイス
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
「jQuery」アコーディオンメニ...
-
jQueryでネスト構造の<li>がク...
-
Javascript <li>
-
動画サイトのURLからswfを抜き...
-
javascriptで教えてください。 ...
-
リンクをクリックした際、一時...
-
【JavaScript】階層関係から要...
-
JQueryタブのアクティブ アン...
-
ドロップダウンメニューに関す...
-
JS <a></a>タグ内のリンク先ア...
-
JSの変数をHTMLに渡す方法
-
大量のチェックボックス状態取...
-
javascriptでEnterキーをtabキ...
-
スタイルシートでロールオーバ...
-
MAX関数を使ってからLEFT JOIN...
-
画像のランダム表示、及び画像...
-
iframe内のリンクが飛ばないの...
-
フッター上部に謎の隙間
-
JSPでの画像ファイル表示
-
テキストエリア内の一部の文字...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
jqueryのsortableで一部ソート...
-
jquery ドロップダウンメニュー...
-
JQueryタブのアクティブ アン...
-
jQueryのeqで最後からn番目以降...
-
チェックボックスに入っている...
-
「jQuery」アコーディオンメニ...
-
クリックした<a>タグのみにClas...
-
javascriptでEnterキーをtabキ...
-
【JQuery】アコーディオンの入...
-
タブ切り替えの初期表示について
-
jQueryでネスト構造の<li>がク...
-
どの<li><a> が押されたか判別...
-
大量のチェックボックス状態取...
-
フルスクリーンについて・・・
-
jQueryのhide,showで中の要素が...
-
【jQuery】遅延実行(タイムラ...
-
アコーディオン自動開閉メニュ...
-
jQueryで表示する吹き出しdivの...
-
JqueryFileTree.js でフォルダ...
-
タブ切り替えの初期表示に関して
おすすめ情報