###前提・実現したいこと
phpで動的に、1つのページにjPlayerを複数配置したい。
###発生している問題・エラーメッセージ
http://klutche.github.io/jPlayer/
上記ページを参考に複数を配置したいのですが、条件によって配置する数が異なり、動的に配置したいため、idではなくclassで配置できるようにしたい。
そもそも実現が可能なのか
情報が少ないとは思いますが、なにか参考になるドキュメントなどあれば勉強させてください。
追記
1つ目のみ記載した場合問題なく再生出来ますが、2つ目を追加すると再生できない状態です。
html <div class="audio_player" data-mp3="<?=$mp3file[$i]?>" data-playerid="<?=$i?>"> </div> <div class="jp_container_<?=$i?>"> <div class="jp-play"></div> <div class="jp-pause"></div> </div> <!-- <div class="audio_player"></div> <div class="jp_container"> <div class="jp-play"></div> <div class="jp-pause"></div> </div> <div class="audio_player"></div> <div class="jp_container"> <div class="jp-play"></div> <div class="jp-pause"></div> </div> --> 以後必要なだけ繰り返し
javascript $('.audio_player').each( function() { var player = $(this); var _id = player.data('playerid'); var _mp3 = player.data('mp3'); player.jPlayer({ ready: function(){ player.jPlayer('setMedia', { mp3: "./mp3/" + _mp3 }); }, play: function() { player.jPlayer("pauseOthers"); }, swfPath: './', wmode: 'window', cssSelectorAncestor: ".jp_container_" + _id, keyEnabled: true }); }); /* $('.audio_player').jPlayer({ ready: function(){ $(this).jPlayer('setMedia', { mp3: "./mp3/01.mp3" }); }, play: function() { $(this).jPlayer("pauseOthers"); }, swfPath: './', wmode: 'window', cssSelectorAncestor: ".jp_container", keyEnabled: true }); */
css .jp-play{ position: absolute; left: 5px; width: 15px; height: 15px; background: url('../jplayer/icon.png') center top no-repeat; cursor: pointer; } .jp-pause{ position: absolute; left: 5px; width: 15px; height: 15px; background: url('../jplayer/icon.png') center bottom no-repeat; cursor: pointer; display: none; }
回答2件
あなたの回答
tips
プレビュー