SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Evangelist silversurfer5150's Avatar
    Join Date
    Aug 2010
    Posts
    534
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    swfobject / flash embed conflict

    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....ate/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.

    PHP Code:
    // JavaScript Document
    $(document).ready(function() {

    $(
    "#progress_bar" ).slider({disabledtrue});
    $(
    "#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 paramsatts);
               $(
    "#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:falsefullscreen:trueautoBufferingtrue}
                    },   
    ///////////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");
                    },
                    
    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().fullDuration10);
                        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",
                        
    disabledfalse,
                        
    min0,
                        
    maxfd,  // fd
                        
    value0,
                        
    slide: function( eventui ) {
                        
    $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({ autoHeightfalse });

     $(
    "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:

    http://will.site88.net/jake/video.php
    "Persistence is the path to perfection"

  2. #2
    Community Advisor silver trophy

    Join Date
    Nov 2006
    Location
    UK
    Posts
    2,551
    Mentioned
    40 Post(s)
    Tagged
    1 Thread(s)
    If you have a javascript error
    then it's not an actionscript issue,
    it's a javascript one. If there's a cross browser issue then it might be something related to the html dom


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •