Question

我有一系列链接，我设置了Flowplayer（http://flowplayer.org）和Fancybox（http://fancybox.net/）：

<a class="fancybox" href="../public/video1.flv">Click here</a>
<a class="fancybox" href="../public/video2.flv">Click here</a>
<a class="fancybox" href="../public/video3.flv">Click here</a>
...

我想在Fancybox中打开这些视频（最新版本，1.3 - 我读过1.2不适合我的情况的教程），一次一个我很惊讶JWPlayer是如何完成的：

<a class="fancybox" href="../jwplayer/player.swf?file=../public/video1.flv">Click here</a>
<a class="fancybox" href="../jwplayer/player.swf?file=../public/video2.flv">Click here</a>
<a class="fancybox" href="../jwplayer/player.swf?file=../public/video3.flv">Click here</a>
...
$('a.fancybox').fancybox({
    'titleShow': false,
    'type': 'swf',
    'width': 480,
    'height': 385,
});

使用Flowplayer，这个非常简单的事情就像地狱一样

我试过了：

<a class="fancybox" href="../flowplayer/flowplayer-3.2.5.swf?&amp;config={'clip':'../public/video1.flv'}">Click here</a>
<a class="fancybox" href="../flowplayer/flowplayer-3.2.5.swf?&amp;config={'clip':'../public/video2.flv'}">Click here</a>
<a class="fancybox" href="../flowplayer/flowplayer-3.2.5.swf?&amp;config={'clip':'../public/video3.flv'}">Click here</a>

而且，除了没有控制栏之外，我轻轻一点“错误301”（也许是因为它寻找控制栏.swf但它没有加载）在在线文档中找到“嵌入参数作为查询字符串”功能是一场噩梦（事实上我在其他网站上发现了这种方法），所以我无法检查我是对还是错，以及我可以做些什么来避免错误301

编辑：我解决了错误301，原来的“flowplayer.controls-3.2.3.swf”文件应该重命名为“flowplayer.controls.swf”（这是无处写的，你必须猜对了）;无论如何，它没有多大帮助，因为在IE7 / 8上崩溃严重 - JavaScript控制台闪烁并说''null'为null或不是对象“

我也试过这里发布的jjames解决方案：http://flowplayer.org/forum/2/17398 但它对我不起作用：Firefox崩溃，在IE上，Fancybox告诉我不应该找到资源并且，无论如何，似乎这个wotk用于单个文件，而我需要一个通用函数来接收链接的href作为参数... 所以，这对我来说没有意义......

$(".fancybox").fancybox({
    'callbackOnShow': function() { // callbackOnShow doesn't exists anymore on Fancybox 1.3; seems replaced by onComplete, but no luck
        flowplayer("fancy_div", "../flowplayer/flowplayer-3.2.5.swf", {
          clip: {
            baseUrl: 'http://www.myPathToVids',
            url: 'myVideo.flv' // I have not a single video! This should be a parameter taken from href of the clicked link
          }     
        }); 
    }
})

请帮忙吗？提前谢谢，我生气了......

Answer 1

尝试手动启动fancybox并将其内容设置为流动播放器。例如，给定链接：

<a href="http://pseudo01.hddn.com/vod/demo.flowplayervod/flowplayer-700.flv" 
    class="videoLink">Demo</a>

创建一个像这样的JQuery点击函数：

$('a.videoLink').click(function(e) {
    e.preventDefault();

    var container = $('<div/>');

    container.flowplayer(
        'http://releases.flowplayer.org/swf/flowplayer-3.2.7.swf',
        $(this).attr('href')
    );

    $.fancybox({
        content: container,
        width: 300, height: 200,
        scrolling: 'no',
        autoDimensions: false
    });
});

请注意，默认情况下，flowplayer占用了它的容器大小，因此必须给出有限的尺寸才能正确查看它。

让Flowplayer在Fancybox中工作

1 个答案: