使用适用于 IE7 和 IE8 的 jQuery 在 Facebox 中加载 FLV

Question

不用说，这在 Chrome、Firefox 和 Safari 中完美运行。 IE（任何版本）都是问题所在。

目标： 我正在尝试加载 JWplayer，它会在 Facebox 弹出窗口中从 S3 加载 FLV。

jQuery(document).ready(function($) {
  $('a[rel*=facebox]').facebox() 
})

HTML (haml)：

%li#videoGirl
  = link_to 'What is HQchannel?', '#player', :rel => 'facebox'

.grid_8.omega.alpha#player{:style => 'display: none;'}
  :javascript
    var so = new SWFObject('/flash/playerTrans.swf','mpl','640px','360px','0');
    so.addParam('allowscriptaccess','always');
    so.addParam('allowfullscreen','true');
    so.addParam('wmode','transparent');
    so.addVariable('file', 'http://hometownquarterlyvideos.s3.amazonaws.com/whatishqchannel.flv&autostart=true&controlbar=none&repeat=always&image=/flash/video_girl/whatishqchannel.jpg&icons=false&screencolor=none&backcolor=FFFFFF&screenalpha=0&overstretch');
    so.addVariable('overstretch', 'true')
    so.write('player');

问题：

1. 尽管视频设置为显示：无；。无论如何它都会开始播放。
2. 单击激活 div 时，IE7 会弹出一个尺寸错误的带有导航的空白 div（参数设置为不显示导航和滑块），并且导航和滑块上没有任何按钮工作。 IE8 显示正确的尺寸，但行为相同，导航和滑块不起作用，并且屏幕空白。

我的猜测：
我认为问题在于 javascript 没有在正确的时间被调用。看起来它正在加载 Facebox，而没有 jwplayer。至少我认为。这就是导航存在的原因。我认为它没有为此读取 javascript。

Answer 1

这里有几个问题。

第一个问题：SWFOBJECT

我认为您看到了不良/不可预测的行为，因为您的 SWFObject 语法有点不对劲。使用 SWFObject，您可以：

1.) 使用 addParam('flashvars', FLASHVARS)，其中 FLASHVARS 是由 & 分隔的配置选项的串联字符串，即

var so = new SWFObject('/flash/playerTrans.swf','mpl','640px','360px','0');
so.addParam('allowscriptaccess','always');
so.addParam('allowfullscreen','true');
so.addParam('wmode','transparent');
so.addParam('flashvars', 'file=http://hometownquarterlyvideos.s3.amazonaws.com/whatishqchannel.flv&autostart=true&controlbar=none&repeat=always&image=/flash/video_girl/whatishqchannel.jpg&icons=false&screencolor=none&backcolor=FFFFFF&screenalpha=0&overstretch=true');
so.write('player');

OR

2.) 使用一堆 addVariable 语句，即

var so = new SWFObject('/flash/playerTrans.swf','mpl','640px','360px','0');
so.addParam('allowscriptaccess','always');
so.addParam('allowfullscreen','true');
so.addParam('wmode','transparent');
so.addVariable('file', 'http://hometownquarterlyvideos.s3.amazonaws.com/whatishqchannel.flv');
so.addVariable('autostart', 'true');
so.addVariable('controlbar', 'none');
so.addVariable('repeat', 'always');
so.addVariable('image', '/flash/video_girl/whatishqchannel.jpg');
so.addVariable('icons', 'false');
so.addVariable('screencolor', 'none');
so.addVariable('backcolor', 'FFFFFF');
so.addVariable('screenalpha', '0');
so.addVariable('overstretch', 'true');
so.write('player');

If如果您需要任何其他信息，这里有一个关于嵌入 Flash JW Player 网站上的 设置向导 将提供现成的- 使用SWFObject代码。

第二个问题：自动启动时显示：无

这是 IE 快捷方式。在大多数浏览器中，当您设置 display: none 时，Flash 将被终止。 IE 中并非如此。为了防止这种情况，你需要设置

so.addVariable('autostart', 'false');

如果你使用一些JS来设置显示CSS属性并且你希望播放器在播放器出现时开始播放，我建议你修改你的JS以开始并通过它的API停止播放器。诚然，这有点复杂，但这都是让事情跨浏览器无缝运行的一部分。

最佳，

扎克

开发者，长尾视频

Answer 2

实例化 Facebox javascript 后，此代码将成功加载 JWplayer。视频在 IE7 或 IE8 中无法显示仍然存在一些问题，但 JWplayer 可以正常加载。

HTML：

<a class="flash" href="http://hometownquarterlyvideos.s3.amazonaws.com/whatishqchannel.flv" rel="/flash/video_girl/whatishqchannel.jpg">Flash</a>

JavaScript：

$(document).ready(function(){
 // click on flash video link
 $('.flash').click(function(){
  $.facebox('<div id="fbvideo"></div>');
  var so = new SWFObject('/flash/playerTrans.swf','fbvideo','640px','360px','0');
  so.addParam('allowscriptaccess','always');
  so.addParam('allowfullscreen','true');
  so.addParam('wmode','transparent');
  so.addVariable('file', $(this).attr('href'));
  so.addVariable('autostart','true');
  so.addVariable('controlbar','none');
  so.addVariable('repeat','always');
  so.addVariable('image',$(this).attr('rel'));
  so.addVariable('icons','false')
  so.addVariable('screencolor','none');
  so.addVariable('backcolor','FFFFFF');
  so.addVariable('screenalpha','0');
  so.addVariable('overstretch', 'true');
  so.write('fbvideo');
  return false;
 })
})