Search code examples
fancyboxflowplayer

Getting Flowplayer to work in a Fancybox


I have a series of links, and I setup both Flowplayer (http://flowplayer.org) and 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>
...

I want to open these videos in a Fancybox (last version, 1.3 - I read around tutorials for 1.2 that don't fit my case), one at a time I'm amazed on how simply it is done with 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,
});

With Flowplayer, this very simple thing feels like hell

I tried:

<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>

And, apart from not having the controlbar, I get a flick of "error 301" (maybe because it looks for controlbar .swf but it doesn't load) Finding the "embed parameters as querystring" feature in the online documentation is a nightmare (and infact I found this approach on other sites), so I can't check if I'm right or wrong, and what I can do to avoid error 301

EDIT: I solved the error 301, the original "flowplayer.controls-3.2.3.swf" file should be renamed into "flowplayer.controls.swf" (this is written nowhere, you have to guess it); anyway, it doesn't help that much since on IE7/8 it badly crashes - the JavaScript console flickers and says that "'null' is null or is not an object"

I also tried the jjames solution posted here: http://flowplayer.org/forum/2/17398 But it doesn't work for me: Firefox crashes and, on IE, Fancybox tells me that ther resource should not be located And, anyway, seems this wotk for a single file, while I need a general function that receives the href of the links as parameter... So, this doesn't make sense to me...

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

Please, any help? Thanks in advance, I'm getting mad...


Solution

  • Try manually launching fancybox and setting setting its content to a flowplayer. For instance, given the link:

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

    create a JQuery click function like this:

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

    Note that flowplayer by default takes up size of it's container, so must be given finite dimensions to view it properly.