У меня есть панель YUI, которую я использую для отображения флэш-видео на нашем сайте. Он прекрасно работает во всех браузерах, кроме IE (в частности, 8, а мне все равно). Я использую вызов AJAX для возврата данных, содержащихся в тегах в моей видео галерее. Как я уже сказал, это нормально в любом браузере, кроме IE. Вот фрагмент кода, который отображает и уничтожает панель:
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&skinSrc=flash/CustomSkinPlaySeekVolFull.swf&autoPlay=true 						" name="FlashVars"/><embed allowFullScreen="true" FlashVars="movieSrc=/flash/financial/mediaPlayer/JBVersion2480x360.flv&skinSrc=flash/CustomSkinPlaySeekVolFull.swf&autoPlay=true 						" 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&skinSrc=flash/CustomSkinPlaySeekVolFull.swf&autoPlay=true 						" 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, но в конце всегда терпит неудачу. Любые идеи или предложения будут высоко оценены.