jquery - Fancybox swfobject "The requested content cannot be loaded. Please try again later."

Question

好的，我已经安装了 FB 2.0.x，它真的很好。但是，我有一个使用 JW Player 的页面，上面有 4 个视频。目前，当您单击链接时，它会运行一个函数来打开 fancybox 实例。 fancybox 是一组 HTML 代码。 html 代码内部是一个带有 id 的 div(每个 div/视频都是唯一的)。然后，它添加 flashvars、params 和 attribute。其功能如下:

function show_modelpopup(id,title,filepath,base_url) {
    var flashvars = { file: base_url+"uploads/videos/original/"+filepath, autostart:'true', skin: base_url+'js/skin.zip'};
var params = { allowfullscreen:'true', allowscriptaccess:'always', wmode: 'transparent'  };
var attributes = { id: id+'player', name: id+'player' };                             
swfobject.embedSWF(base_url+'mediaplayer/player.swf','container'+id, 480, 385, '9.0.115', 'false', flashvars, params, attributes, flashloaded);
}

当 flashvars、params 和 attribute 完成设置后，它会运行 swfobject.embedSWF，最后一个选项是加载视频后运行的函数:

function flashloaded() {
    jQuery('#shadowbox_archives').fancybox({
        padding: 10,
        type: 'html',  
        height: 520,
        width: 600
    });
    jQuery.fancybox.open(jQuery('#shadowbox_archives'));
}

这一切都很棒。它会加载窗口，您会看到 Flash 播放器。但是，当您单击播放按钮时，它会显示“无法加载请求的内容。请稍后重试。”。我在 Firefox 上使用 firebug 来控制台日志内容，并且我验证了 flv 文件路径是否正确。事实上，我将主页设置为显示完全相同的视频，但不在 fancybox 内。 swfobject js 的输出如下:

Fancybox 弹出窗口:

    <object id="45player" width="480" height="385" type="application/x-shockwave-flash" name="45player" data="http://www.green-scene.com/mediaplayer/player.swf">
    <param name="allowfullscreen" value="true">
    <param name="allowscriptaccess" value="always">
    <param name="wmode" value="transparent">
    <param name="flashvars" value="file=http://www.green-scene.com/uploads/videos/original/video_45_1318559535.flv&autostart=true&skin=http://www.green-scene.com/js/skin.zip">
    </object>

主页(非 fancybox):

    <object id="45player" width="480" height="385" type="application/x-shockwave-flash" name="45player" data="http://www.green-scene.com/mediaplayer/player.swf">
    <param name="allowfullscreen" value="true">
    <param name="allowscriptaccess" value="always">
    <param name="wmode" value="transparent">
    <param name="flashvars" value="file=http://www.green-scene.com/uploads/videos/original/video_45_1318559535.flv&autostart=true&skin=http://www.green-scene.com/js/skin.zip">
    </object>

主页没有问题。但 fancybox 确实如此。那么我错过了什么？

感谢您的所有帮助!

更新刚刚做出的有趣发现。如果我单击播放器控制栏中的按钮展开到全屏，它将全屏显示，我可以单击播放来实际播放它。如果我单击按钮返回正常大小(或按 esc)，它会继续在 fancybox 中播放。但是，如果我尝试单击“暂停”，它就会消失并给出相同的错误消息。

UPDATE #2 结果 Internet Explorer 喜欢上面的内容并且工作得很好。但 Firefox 和 Safari 给了我上面同样的错误。真是令人难以置信。

更新 #3 我能够在 Shadowbox 打开时让视频自动播放，但现在您无法在 Mac 上的 Firefox 或 Safari 中暂停或全屏播放。但 IE 8/9 仍然可以正常工作。

Answer 1

好的，我查看了您的页面，发现每个拇指都会触发一个 onclick 函数:

onclick="return show_modelpoup('//parameters')"

函数show_modelpoup()，位于archives.js内部file 通过 jQuery html() 使用 id="shadowbox_archives" 构建 DIV 的内容

jQuery('#shadowbox_archives').html();

但是也将 Fancybox 绑定(bind)到同一个选择器

jQuery('#shadowbox_archives').fancybox();

...稍后，相同的函数使用 API 方法 $.fancybox.open() 触发 Fancybox(无 Shadowbox)...到目前为止一切顺利!？!？

这里发生的情况是，Fancybox 内部的实际内容是一个带有 id="shadowbox_archives" 的 DIV(也绑定(bind)到 Fancybox)，因此每次您单击此类 DIV 内的任何部分时，无论是您的 swf 控件还是其他地方(甚至在空白空间上)，它都会尝试再次触发 Fancybox(没有指示这次的内容应该是什么)，因此出现错误“无法加载请求的内容。请重试”稍后。”

将 Fancybox 绑定(bind)到将在 Fancybox 中打开的相同内容(选择器)会产生循环效果，因此您需要重新制定 show_modelpoup() 函数来更改它，

...或者您可能只需要修改 flashloaded() 函数(在 show_modelpoup() 内部)，使其在 flash 后直接触发 Fancybox内容已加载，例如:

function flashloaded() {
    jQuery.fancybox({
        href: '#shadowbox_archives',
        padding: 10,
        type: 'html',  
        height: 520,
        width: 600
    });
    // jQuery.fancybox.open(jQuery('#shadowbox_archives'));
}

请注意，我注释掉了 API 方法 $.fancybox.open()

更新:

由于您使用内联内容，因此您的 flashloaded() 函数应如下所示:

function flashloaded() {
    jQuery.fancybox({
        href: '#shadowbox_archives',
        autoSize: false,
        padding: 10,
        type: 'inline',  // no html
        height: 520,
        width: 600
    });
    // jQuery.fancybox.open(jQuery('#shadowbox_archives'));
}