代码之家 › 专栏 › 技术社区 › Ivan

让Flowplayer在Fancybox中工作

flowplayer fancybox

0

Ivan · 技术社区 · 14 年前

我有一系列链接,我设置了两个Flowplayer( http://flowplayer.org )还有花盒子( 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>

而且,除了没有controlbar之外,我得到了一个“error 301”的提示(可能是因为它寻找controlbar.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似乎是针对单个文件的,而我需要一个通用函数,它接收链接的ref作为参数。。。所以,这对我来说毫无意义。。。

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

拜托,有什么帮助吗? 提前谢谢,我快疯了。。。

1 回复 | 直到 9 年前

1

3

Huuu 11 年前

尝试手动启动fancybox并将其内容设置为flowplayer。例如,给定链接:

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

创建一个JQuery click函数,如下所示:

$('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占用其容器的大小,所以必须给它有限的维度才能正确地查看它。