Getting Flowplayer to work in a Fancybox

StackOverflow https://stackoverflow.com/questions/4268005

  •  28-09-2019
  •  | 
  •  

Question

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

Was it helpful?

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.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top