Question

I have a YUI panel that I am using to display flash vids throughout our site. It is working wonderfully in all broswers, except IE (specifically 8 as I don’t care about the rest). I am using an AJAX call to return the data contained in the tags in my video gallery. Like I said, it’s fine in every browser but IE. Here the piece of code that displays and destroys the panel:

    YAHOO.namespace("MYSITE.widget.VideoPanel");
/**
* @projectDescription MYSITE.widget.VideoPanel is an extension of the YAHOO.widget.Panel widget which adds MYSITE specific options and
* adds ARIA roles if supported
* requires MYSITE.js
* @author   web development
* @version 1.0
*/
MYSITE.widget.VideoPanel = function (id, cntnt, type) {
    /**
    * extend the constructor for YAHOO.widget.Panel
    */
    MYSITE.widget.VideoPanel.superclass.constructor.call(this, 
            id || YAHOO.util.Dom.generateId(), 
        {
            width: "550px",
            height:"485px",         
            fixedcenter:true,                                                     
            close: true, 
            underlay:"none", 
            draggable: false, 
            modal: true,
            zindex:1001,
            monitorresize:false,
            visible: false
        }
    );

    // since the custom panel inherits from Panel, all its methods and properties are accessible through 'this'
    if(cntnt){
        this.setHeader("");
        this.setBody(cntnt);
        this.setFooter("");     
    }

    var keyArray = ((type && type == "dialog") ? [YAHOO.util.KeyListener.KEY.ESCAPE] : [YAHOO.util.KeyListener.KEY.ESCAPE, YAHOO.util.KeyListener.KEY.SPACE]);

    var kl = new YAHOO.util.KeyListener(document, { keys:keyArray },                            
                                                { fn:this.hide,
                                                    scope:this,
                                                    correctScope:true }, "keyup" ); 
                                                    // keyup is used here because Safari won't recognize the ESC
                                                    // keydown event, which would normally be used by default

    this.cfg.queueProperty("keylisteners", kl);
    this.render(document.body);
    this.body.tabIndex = 0;
    if(MYSITE.aria){
        this.body.setAttribute("role", "alertdialog");  
        this.body.setAttribute("aria-hidden", "true");
    }
};

/**
* declare the above constructor to inherit from Panel
*/ 
YAHOO.lang.extend(MYSITE.widget.VideoPanel, YAHOO.widget.Panel,
                    {
                        show: function (el){                             
                            MYSITE.widget.VideoPanel.superclass.show.call(this);
                            this.keyingElement = el;    
                            if(MYSITE.aria){
                                this.body.setAttribute("aria-labelledby", YAHOO.util.Dom.generateId(el));
                                this.body.setAttribute("aria-hidden", "false");
                            }
                            this.body.focus();
                        },
                        hide: function (){
                            var obj =document.getElementById('MediaEmbedObject');
                                obj.parentNode.removeChild(obj);
                            MYSITE.widget.VideoPanel.superclass.hide.call(this);        
                            if(MYSITE.aria) this.body.setAttribute("aria-hidden", "true");
                            this.keyingElement.focus();
                        }                       
                    });

/**
* hide:function closes panel and removes the flash object to stop continual play
*/

YAHOO.register("videoPanel", MYSITE.widget.VideoPanel, {
            version: "3.0",
            build: "100"
        });

Here is the code that gets and displays the content of the video panel:

/**
 * Function to lazy load, then show the video panel with the content of the link passed in inside the panel
 */
var showVideoPanel = function(e, linkEl){
    Event.preventDefault(e);    

    if(!YAHOO.env.getVersion("videoPanel")) {           
        var successHandler = function() {               
            videoPanel = new COUNTRY.widget.VideoPanel("videoPanel", " ");              
            showVideoPanel(e, linkEl);
        };

        //this is not likely to go off (404 is not considered an error)
        var failureHandler = function() {
            window.location = linkEl.href;
            return;
        };

        MYSITE.loadComponent("videoPanel", successHandler, failureHandler);
    } 
    else {              
        MYSITE.util.Ajax.getRemoteContent('GET', linkEl.href, videoPanel.body, {
            success: function(o){                           
                var start, end, el;
                el = Dom.get(videoPanel.body);
                start = o.responseText.indexOf('<object');
                end = o.responseText.indexOf('</noscript>', start);                 
                el.innerHTML = o.responseText.substring(start, end);

            },
            failure: function(o){       
                el = Dom.get(videoPanel.body);          
                el.innerHTML = "The requested content is currently unavailable. Please try again later.";
            }                       
        }); 

        videoPanel.show(linkEl);        
    }
};

And finally here is what my AJAX call returns:

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" id="MediaEmbedObject"     height="425" width="525" data="flash/playerVar1.2.swf" type="application/x-shockwave-flash"><param value="flash/playerVar1.2.swf" name="movie"/><param value="lt" name="salign"/><param value="false" name="loop"/><param value="false" name="menu"/><param value="true" name="allowFullScreen"/><param value="true" name="AutoPlay"/><param value="movieSrc=movieSrc=/flash/financial/mediaPlayer/JBVersion2480x360.flv&amp;skinSrc=flash/CustomSkinPlaySeekVolFull.swf&amp;autoPlay=true&#10;&#9;&#9;&#9;&#9;&#9;&#9;" name="FlashVars"/><embed allowFullScreen="true" FlashVars="movieSrc=/flash/financial/mediaPlayer/JBVersion2480x360.flv&amp;skinSrc=flash/CustomSkinPlaySeekVolFull.swf&amp;autoPlay=true&#10;&#9;&#9;&#9;&#9;&#9;&#9;" id="videogalleryObject" height="425" width="525" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" name="videogalleryObject" quality="high" src="flash/playerVar1.2.swf" AutoPlay="true"/></object></noscript><form name="flashForm" action=""><fieldset><input value="flashVid" name="flashDivId" type="hidden"/><input value="525" name="flashWidth" type="hidden"/><input value="425" name="flashHeight" type="hidden"/><input value="flash/playerVar1.2.swf" name="flashUrl" type="hidden"/><input value="movieSrc=/flash/financial/mediaPlayer/JBVersion2480x360.flv&amp;skinSrc=flash/CustomSkinPlaySeekVolFull.swf&amp;autoPlay=true&#10;&#9;&#9;&#9;&#9;&#9;&#9;" name="FlashVars" type="hidden" id="playingFlash"/><input value="Flash" name="flashName" type="hidden"/><input value=" Interns" name="flashAltText" type="hidden"/><input value="always" name="allowScriptAccess" type="hidden"/><input value="true" name="allowFullScreen" type="hidden"/></fieldset></form>

My biggest problem is that IE pulls in the tag instead of the tag and for some reason (even though theoretically the video should still play) it will not in IE. I get the flash player to display and sometimes it will even bring in all the controls and attempt to load the .flv, but always fails in the end. Any ideas or suggestions would be much appreciated.

Answer 1

Our server was doing funny things with media when called through AJAX we found out. We have since gone to hosting our videos through vimeo and using their player that which determines which version of of the player to use and what format to play the video in, based on the user’s browser. Much more time efficient to implement, and that was our main concern.