(続き)というわけで、オリジナルサイトのサンプルをまねっこして、
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');
?>
お礼
お礼が遅れてしまって申し訳ありません。 こちらの不備で少ない情報の中、色々やっていただいて本当にありがとうございました。 さっそくyyr446さんのソースをお借りして作ってみたところ、やはりプレイヤーの表示が されるのみで、楽曲の読み込み・再生ができません・・・ 載せてもらった参考URLのページではしっかり読み込みして再生もされたので、ブラウザの 問題ではないと思います。 確認の仕方が悪いんでしょうか・・・ 現在の環境は Firefox 3.0.18 xampp version 1.7.3 PHP: 5.3.1 Apache: 2.2.14 で、ローカルで確認しながら作成しています。 試行錯誤しながら頑張ってみますが、よろしかったらまたお暇な時に 教えていただきたいです。 ご回答ありがとうございました。