Hi guys,
I have an api conflict issue which is taking place between flowplayer ( written using flash embed) and youtube chromeless player ( embedded with swf object)
Please see here for the doc :
http://ec2-174-129-56-191.compute-1.amazonaws.com:8080/demos/installation/alternate/index.html
Now the error is a js error - unspecified error line 49 char 5 but I have a suspicion that its something to do with flash api conflict which is why I’m posting on this forum. Only occurs on IE 7,8 when you select a yt vid and then follow it with flowplayer
Basically the js below is swapping out one player (on click of button with class of play) for another. I was wondering if any of you actionscript whizkids could take a look at what I’m doing and spot any obvious flash/as no-nos that I may have missed as a humble JS developer with little knowledge of as.
// JavaScript Document
$(document).ready(function() {
$("#progress_bar" ).slider({disabled: true});
$("#flowplayer_mute, #YouTube_mute").hide();
////////////////////Closure//////////////////////////////////////////////////
function Player()
{
Player.prototype.set_current_player = function(player){
this.current_player = player;
this.YouTube_initiated = false;
this.flowplayer_initiated = false;
};
Player.prototype.get_current_player = function() {
return this.current_player;
};
Player.prototype.set_flowplayer_state = function(state) {
this.flowplayer_initiated = state;
};
Player.prototype.set_YouTube_state = function(state) {
this.YouTube_initiated = state;
};
Player.prototype.get_player_state = function(player) {
if(player === "flowplayer")
{
return this.flowplayer_initiated;
}
else if(player === "YouTube")
{
return this.YouTube_initiated;
}
};
Player.prototype.switch_chrome = function(current_player) {
$("#play, #YouTube_play, #flowplayer_play").removeAttr( "id" ).attr("id", this.current_player + "_play");
$("#stop, #YouTube_stop, #flowplayer_stop").removeAttr( "id" ).attr("id", this.current_player + "_stop");
$("#pause, #YouTube_pause, #flowplayer_pause").removeAttr( "id" ).attr("id", this.current_player + "_pause");
$("#goto_start, #YouTube_goto_start, #flowplayer_goto_start").removeAttr( "id" ).attr("id", this.current_player + "_goto_start");
$("#volume, #YouTube_volume, #flowplayer_volume").removeAttr( "id" ).attr("id", this.current_player + "_volume");
$("#vol_btn, #YouTube_vol_btn, #flowplayer_vol_btn").removeAttr( "id" ).attr("id", this.current_player + "_vol_btn");
$("#progress_bar, #YouTube_progress_bar, #flowplayer_progress_bar").removeAttr( "id" ).attr("id", this.current_player + "_progress_bar");
$("#fullscreen_effect, #YouTube_fullscreen_effect, #flowplayer_fullscreen_effect").removeAttr( "id" ).attr("id", this.current_player + "_fullscreen_effect");
};
}
var player = new Player(); ///// Instantiate player object used for flags and changing player id
///////////////////End Closure///////////////////////////////////
$(".play").click(function() {
$player_tag = $(this).parent().attr("class");
if($player_tag == "YouTube_identify")
{
if(player.get_current_player() === "flowplayer")
{
// $f("splash", "flash/flowplayer-3.2.7.swf").unload();
}
if(player.get_player_state("YouTube") === true)
{
YouTube_play();
}
else
{
var embed_code = $(this).parent().find(":input").attr("value");
//alert(embed_code);
player.set_current_player("YouTube");
player.set_YouTube_state(true);
player.switch_chrome("YouTube");
$('<div id ="ytapiplayer"><p id="no_flash">You must have at least Flash Player 8 installed to view YouTube videos</p></div>').prependTo('#splash');
var params = { allowScriptAccess: "always" };
var atts = { id: "myytplayer" };
swfobject.embedSWF(
"http://www.youtube.com/apiplayer?enablejsapi=1&version=3&playerapiid=ytplayer" ,
"ytapiplayer", "414", "245", "8", null , null , params, atts);
$("#chrome img, #progress_bar").css({opacity:1}, "5000");
$.scrollTo("#header", "fast");
}
}
else
{
if(player.get_current_player() === "YouTube")
{
YouTube_stop();
$(ytplayer).hide();
}
if(player.get_player_state("flowplayer") === true)
{
// alert("already set up!");
// http://www.youtube.com/watch?v=DgnhiZkMKPM&feature=player_detailpage
//<object style="height: 390px; width: 640px"><param name="movie" value="http://www.youtube.com/v/DgnhiZkMKPM?version=3"><param name="allowFullScreen" value="true"><param name="allowScriptAccess" value="always"><embed src="http://www.youtube.com/v/DgnhiZkMKPM?version=3" type="application/x-shockwave-flash" allowfullscreen="true" allowScriptAccess="always" width="640" height="360"></object>
flowplayer_play();
}
else
{
player.set_current_player("flowplayer");
player.set_flowplayer_state(true);
player.switch_chrome("flowplayer");
/////////// get embed code from db (stored in accordion table)////////
/////////// put video hyperlink ready for player////////
$("#splash").attr('href' , "http://blip.tv/file/get/N8inpasadena-Flowers457.flv");
///////////call flowplayer flash application //////////////
$f("splash",{src: 'flash/flowplayer-3.2.7.swf', wmode: 'transparent'}, {
plugins: {
controls:{all:false, fullscreen:true, autoBuffering: true}
}, ///////////Callback function/////////
wmode: "opaque",
onLoad: function () {
this.unmute();
$("#flowplayer_mute").hide();
interval_id = setInterval('get_time()',1000);
},
onPause: function() {
var src="Images/play.png";
clearInterval(interval_id);
$("#flowplayer_pause").attr("src", src).removeAttr( "id" ).attr("id", "flowplayer_play");
},
onStop: function() {
var src="Images/play.png";
this.getPlugin("play").hide();
clearInterval(interval_id);
$("#flowplayer_pause").attr("src", src).removeAttr( "id" ).attr("id", "flowplayer_play");
$("#flowplayer_progress_bar" ).slider( "option", "value", 0 );
},
onResume: function() {
var src="Images/pause.png";
$("#flowplayer_play").attr("src", src).removeAttr( "id" ).attr("id", "flowplayer_pause");
interval_id = setInterval('get_time()',1000);
},
onFinish: function() {
clearInterval(interval_id);
flowplayer_stop();
} ,
onBegin: function(){
var src="Images/pause.png";
$("#flowplayer_play").attr("src", src).removeAttr( "id" ).attr("id", "flowplayer_pause");
},
onStart: function () {
var fd = parseInt(this.getClip().fullDuration, 10);
var src="Images/pause.png";
$("#flowplayer_play").attr("src", src).removeAttr( "id" ).attr("id", "flowplayer_pause");
$( "#progress_bar" ).hide();
$( "#flowplayer_progress_bar" ).slider({
range: "min",
disabled: false,
min: 0,
max: fd, // fd
value: 0,
slide: function( event, ui ) {
$f("splash").seek(ui.value); // we want f('splash') not the slider itself
}}).show();
}
});
$("#chrome img, #progress_bar").css({opacity:1}, "5000");
$.scrollTo("#header", "fast");
flowplayer_play();
}
}
});
/////////////// PLAYER CHROME (player controls)////////////
$("#YouTube_fullscreen_effect, #flowplayer_fullscreen_effect").live({
mouseenter:
function()
{
$("#fullscreen_hover").animate({width:"24",height:"18"}, "5000");
// event.stopPropagation();
},
mouseleave:
function()
{
$("#fullscreen_hover").animate({width:"15",height:"11"}, "10000");
// event.stopPropagation();
}
}
);
$("#flowplayer_vol_btn, #YouTube_vol_btn, #YouTube_volume, #flowplayer_volume").live({
mouseenter:
function()
{
$("#YouTube_volume, #flowplayer_volume").stop().show().animate({"opacity": "1"}, "slow");
},
mouseleave:
function()
{
$("#YouTube_volume, #flowplayer_volume").stop().animate({"opacity": "0"}, 2900);
}
}
);
///////////////////MISC HOVER//////////////////////////////////
$(".play").hover(
function()
{
$(this).animate({width:"97",height:"65"}, "fast");
// event.stopPropagation();
},
function()
{
$(this).animate({width:"87",height:"55"}, "fast");
// event.stopPropagation();
}
);
$(".flowplayer_select, .flowplayer_btn, .YouTube_select, .YouTube_btn").hover(
function()
{
var src ="Images/btn_green.png";
if($(this).attr("class") == "flowplayer_btn" || $(this).attr("class") == "flowplayer_select")
{
$(".flowplayer_btn").attr("src", src).animate({width:"35",height:"35"}, "fast");
}
else
{
$(".YouTube_btn").attr("src", src).animate({width:"35",height:"35"}, "fast");
}
},
function()
{
var blue ="Images/btn_blue.png";
var red ="Images/btn_red.png";
$(".flowplayer_btn").attr("src", blue).animate({width:"31",height:"31"}, "fast");
$(".YouTube_btn").attr("src", red).animate({width:"31",height:"31"}, "fast");
}
);
////////////////////////PANEL PLAYER-SELECTION POPOUT///////////////////
$(".flowplayer_select, .flowplayer_btn").click(function(){
$(".panel_left").show("2000");
// event.stopPropagation();
$.scrollTo($(".panel_left"), 1000);
});
$(".YouTube_select, .YouTube_btn").click(function(){
$(".panel_right").show("slow");
//event.stopPropagation();
$.scrollTo($(".panel_right"), 1000);
});
$(".upload_panel_close").click(function(){
$(".panel_left, .panel_right").hide("slow");
//$('form').clearForm();
return false;
});
$("#accordion").accordion({ autoHeight: false });
$("input[type=file]").filestyle({
image: "Images/browse.png",
imageheight : 38,
imagewidth : 92,
width : 250
});
});
Any help would be greatly appreciated
Silversurfer
hyperlink to live code is here: