2011-07-19 7 views
0

YouTubeのサイト全体にフラッシュビデオを表示するために使用しているYUIパネルがあります。私は残りの部分を気にしないので、IE(特に8)を除いて、すべての仲間でうまく機能しています。私はAJAX呼び出しを使用して、ビデオギャラリーのタグに含まれるデータを返します。私が言ったように、IE以外のブラウザーでも問題ありません。ここでは、パネルを表示し、破壊するコードの一部:IE8 <object>タグの問題

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" 
     }); 

ここでは、ビデオパネルの内容を取得し、表示するコードは次のとおりです。

/** 
* 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);   
    } 
}; 

そして最後に、ここでは私のAJAXは、リターンを呼んでいます:

<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> 

私の最大の問題は、それがIEではないでしょう(理論的には、ビデオはまだ果たすべきにもかかわらず)IEの代わりにタグのタグに、いくつかの理由で引っ張るということです。私はフラッシュプレーヤーを表示し、時にはすべてのコントロールを取り込み、.flvを読み込もうとしますが、いつも失敗します。どんなアイデアや提案も大歓迎です。

+1

"私の最大の問題は、IEがタグの代わりにタグを引っ張ることです。" – shanethehat

答えて

0

私たちが知ったAJAXを通して呼び出されると、私たちのサーバーはメディアで面白いことをしていました。私たちはこれ以来、vimeoを通じてビデオをホストし、プレイヤーを使用して、使用するプレーヤーのバージョンとビデオを再生する形式をユーザーのブラウザーに基づいて決定しました。実装にはかなりの時間がかかり、それが私たちの主な関心事でした。

0

ここでは、パラメータ(flashvars)の1つでaJaxコールのスニペットが表示されています。

<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"/>