重要なお知らせ

「教えて! goo」は2025年9月17日(水)をもちまして、サービスを終了いたします。詳細はこちら＞

電子書籍の厳選無料作品が豊富！

jQueryプラグインの併用について

解決済

  • 質問者：marheven
  • 質問日時：
  • 回答数：3件

jQueryプラグインの併用について

失礼します、WEB制作初心者です。
現在jQueryのプラグインであるcolorboxを使用し、
以下のように外部ファイル（PHP）を読み込んでいます。

$(document).ready(function(){
　$("#inline").colorbox({
　　contentWidth:"500px",
　　contentInline:"#inline-content"
　});
});

この際、読み込んだPHP内で同じくjQueryプラグインである
FlexPlayerをお借りして、音楽を再生しようとしたのですが・・・

個別では動作するものの、併用すると外部ファイルが読み込まれた後、
プレイヤーの表示がされるだけで、再生ボタンを押しても反応がない状態です。

情けない話ですがリファレンス等を見ても自力では解決できず
悩んでいたので、こちらでお伺いすることにした次第です。

これらのプラグインは同時に使うことはできないのでしょうか、初心者丸出しの
質問で申し訳ないですが、参考になるページだけでも教えてもらえたら幸いです。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (3件)

No.2ベストアンサー

  • 回答者： yyr446
  • 回答日時：

(続き)というわけで、オリジナルサイトのサンプルをまねっこして、


Colorboxで動くFlexPlayerのサンプルを作ったら、実現できました。
　参考URL
やったあと思ったら、FireFoxでうまくいっただけで、ＩＥさんは
駄目でした。なんかやっぱりColorboxとFlexPlayerでコンフリクト
している部分があるようで、Colorbox終了時に苦肉の策で、
$(document).bind('cbox_cleanup', function(){
location.reload();
});
として、エラーを手抜き対応したが、IEだとColorboxのオープンさえできん。
それとも他に問題があるのやら．．．．。

IEはデバッグしにくいのでもう作るの止めます。

そんなわけで、役に立たないかもしれませんが、せっかくだから作った
ソースコードを載せときます。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja-JP">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>FlexPlayer Test By ColorBox</title>
<style type="text/css"></style>
<link type="text/css" media="screen" rel="stylesheet" href="/jslib/colorbox/example1/colorbox.css">
<link type="text/css" media="screen" rel="stylesheet" href="/jslib/flexplayer/mediaplayer.css">
<script type='text/javascript' src='/jslib/jquery-1.3.2.min.js'></script>
<script type='text/javascript' src='/jslib/colorbox/colorbox/jquery.colorbox-min.js'></script>
<script type='text/javascript' src='/jslib/flexplayer/jquery.flexplayer.min.js'></script>
<script type="text/javascript" charset="utf-8">
<!--
var myplayer;
var contents_path;
$(document).ready(function(){
$(".medialist").colorbox({
width:"600px",
inline:true,
href:"#mediaPlayer_box",
onLoad:function(){
contents_path=this;
mediaPlayer = new $("#mediaPlayer").flexplayer({
swfPath:"/jslib/flexplayer/flexplayer.swf",
bgcolor: "#ffffff",
swfReady:function(){
$(".player_play").click();
},
onProgress:function(bytesLoaded, bytesTotal, playedTime, totalTime){
if ($("#mediaPlayer").data("seekFlag")) return;
$("#mediaPlayer_box .info").text(millisec2str(playedTime)+" / "+millisec2str(totalTime));
var obj = $("#mediaPlayer_box .player_status");
$("#mediaPlayer_box .seekbar").css("width", 250*(playedTime/totalTime)+"px");
var w = 250*(bytesLoaded/bytesTotal);
if (w<=250) $("#mediaPlayer_box .progressbar").css("width", w+"px");
else $("#mediaPlayer_box .progressbar").css("width", "250px");
}
});
}
});
$(document).bind('cbox_cleanup', function(){
location.reload();
});
});
function millisec2str(millisec){
var min = Math.floor((millisec/1000)/60);
var sec = Math.floor((millisec/1000)-(min*60));
if (min<=0) min = "00";
else if (min<10) min = "0"+min;
if (sec<=0) sec = "00";
else if (sec<10) sec = "0"+sec;
return min+":"+sec;
}
function playStart(playObj,playBtnObj,pauseBtnObj,changeFlag){
if (playObj.playedTime() > 0 && !changeFlag){
playObj.resume();
playBtnObj.hide();
pauseBtnObj.show();
}else{
playObj.play({type:"mp3",path:contents_path});
//playObj.play({type:"flv",path:"/image/cat.flv"});
playBtnObj.hide();
pauseBtnObj.show();
}
}
function playPause(playObj,playBtnObj,pauseBtnObj){
playObj.pause();
pauseBtnObj.hide();
playBtnObj.show();
}
function playStop(playObj,playBtnObj,pauseBtnObj,seekValObj,seekInfoObj){
playObj.stop();
seekValObj.css("width", "0px");
seekInfoObj.text("00:00 / "+millisec2str(playObj.totalTime()));
pauseBtnObj.hide();
playBtnObj.show();
}
function volumeMute(playObj, vlmObj, vlmMuteObj){
if (vlmObj.hasClass("mute")) {
vlmObj.removeClass("mute");
playObj.volume(playObj.data("volumeTmp"));
vlmMuteObj.hide();
vlmObj.show();
}
else {
vlmObj.addClass("mute");
playObj.data("volumeTmp", playObj.volume());
playObj.volume(0);
vlmObj.hide();
vlmMuteObj.show();
}
}
function seekOvserve(event, playObj, valObj, infoObj){
var diff = (event.clientX - valObj.offset().left);
if (0<=diff && diff<=250) valObj.css("width", diff);
var restartFlag = false;
if (playObj.status()=="playing") {
playObj.pause();
restartFlag = true;
}
playObj.data("seekFlag", true);
$(document).mousemove(function(e){
diff = (e.clientX - valObj.offset().left);
if (0>diff) diff = 0;
else if (diff>250) diff = 250;
valObj.css("width", diff);
var tt = playObj.totalTime();
infoObj.text(millisec2str(tt*(diff/250))+" / "+millisec2str(tt));
});
$(document).mouseup(function(e){
diff = (e.clientX - valObj.offset().left);
if (0>diff) diff = 0;
else if (diff>250) diff = 250;
valObj.css("width", diff);
if (diff>=250) playObj.seek(playObj.totalTime());
else if (0>=diff) playObj.seek(0);
else playObj.seek(playObj.totalTime()*(diff/250));
if (restartFlag) playObj.resume();
$(document).unbind('mousemove');
$(document).unbind('mouseup');
playObj.data("seekFlag", false);
});
}
function voluemeSeekOvserve(event, playObj, valObj, vlmObj){
if (vlmObj.hasClass("mute")) return;
var diff = (event.clientX - valObj.offset().left);
if (0<=diff && diff<=40) valObj.css("width", diff);
$(document).mousemove(function(e){
diff = (e.clientX - valObj.offset().left);
if (0<=diff && diff<=40) valObj.css("width", diff);
});
$(document).mouseup(function(e){
$(document).unbind('mousemove');
$(document).unbind('mouseup');
var val = (((valObj.css("width")).slice(0,-2)-0)/40)*100;
playObj.volume(val);
playObj.data("volumeVal", val);
});
}
// -->
</script>
<body>
<h3>FlexPlayer Test By ColorBox</h3>
<ul>
<li><a class='medialist' href="/image/demo1_1.mp3">デモ1(直接読み込み)</a></li>
<li><a class='medialist' href="/php/songselect.php">デモ2(PHP経由・しばし時間がかかる)</a></li>
</ul>
<div style='display:none'>
<div id="mediaPlayer_box">
<div id="mediaPlayer"></div>
<div id="mediaPlayer_control">
<a href="javascript:void(0);" class="player_play" onclick="playStart(mediaPlayer,$('#mediaPlayer_box a.player_play'), $('#mediaPlayer_box a.player_pause'), false);this.blur();return false;"></a>
<a href="javascript:void(0);" class="player_pause" onclick="playPause(mediaPlayer,$('#mediaPlayer_box a.player_play'), $('#mediaPlayer_box a.player_pause'));this.blur();return false;" style="display:none"></a>
<a href="javascript:void(0);" class="player_stop" onclick="playStop(mediaPlayer, $('#mediaPlayer_box a.player_play'), $('#mediaPlayer_box a.player_pause'), $('#mediaPlayer_box .seekbar'), $('#mediaPlayer_box .info'));this.blur();return false;"></a>
<div class="player_status">
<div class="info">00:00 / 00:00</div>
<div class="seekbarOvserver" onmousedown="seekOvserve(event, mediaPlayer, $('#mediaPlayer_box .seekbar'), $('#mediaPlayer_box .info'));"></div>
<div class="seekbar"></div>
<div class="progressbar"></div>
</div>
<a href="javascript:void(0);" class="player_volume" onclick="volumeMute(mediaPlayer, $('#mediaPlayer_box a.player_volume'), $('#mediaPlayer_box a.player_volume_mute'));this.blur();return false;"></a>
<a href="javascript:void(0);" class="player_volume_mute" onclick="volumeMute(mediaPlayer, $('#mediaPlayer_box a.player_volume'), $('#mediaPlayer_box a.player_volume_mute'));this.blur();return false;" style="display:none"></a>
<div class="player_volumeSeek">
<div class="volumeSeekOvserver" onmousedown="voluemeSeekOvserve(event, mediaPlayer, $('#mediaPlayer_box .volume:first'), $('#mediaPlayer_box a.player_volume'));"></div>
<div class="volumeSeekfilm"></div>
<div class="volume"></div>
<div class="volumeSeekbg"></div>
</div>
</div>
</div>
</div>
</body>
</html>

ＰＨＰ（songselect.php）はこれ
<?php
header('Content-Type: audio/mpeg');
readfile('../image/demo1_1.mp3');
?>
    • good
    • 0
    • 件
通報する

No.3

  • 回答者： yyr446
  • 回答日時：

Google Chromeブラウザーでも動いたぞ、


駄目なのはＩＥ、CSSの仕様か．．．．．．？
    • good
    • 0
    • 件
通報する
この回答へのお礼

お礼が遅れてしまって申し訳ありません。
こちらの不備で少ない情報の中、色々やっていただいて本当にありがとうございました。
さっそくyyr446さんのソースをお借りして作ってみたところ、やはりプレイヤーの表示が
されるのみで、楽曲の読み込み・再生ができません・・・
載せてもらった参考URLのページではしっかり読み込みして再生もされたので、ブラウザの
問題ではないと思います。

確認の仕方が悪いんでしょうか・・・
現在の環境は
Firefox 3.0.18
xampp version 1.7.3
PHP: 5.3.1
Apache: 2.2.14
で、ローカルで確認しながら作成しています。

試行錯誤しながら頑張ってみますが、よろしかったらまたお暇な時に
教えていただきたいです。

ご回答ありがとうございました。

通報する
お礼日時：2010/02/26 23:08

No.1

  • 回答者： yyr446
  • 回答日時：

これだけでは、どこからサンプルやライブラリーを拾ってきたのか


解りかねますが、ライブラリーを使う時は可能な限り最新のバージョン
を使い、オリジナル配布もとのドキュメントを参考にしましょう（たとえ英語でも）。

やられたい事は、FlexPlayerのコンテナーはページ内で非表示にしておいて、
外部PHPへのリンクをクリックしたら、FlexPlayerをcolorboxで表示して
再生させるをやりたいのですね。
colorboxはVer1.3.6を使いましょう。
http://colorpowered.com/colorbox/
FlexPlayerはVer0.1しかないみたい
http://www.wktklabs.com/flexplayer/
jqueryは今のところ、Ver　1.3.2が　無難でしょう

（続く）　暇があったら．．．．
    • good
    • 0
    • 件
通報する

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

関連するカテゴリからQ&Aを探す

今、見られている記事はコレ!

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報