Solved

Getting Flowplayer to work in a Fancybox

Posted on 2010-11-24
7
2,132 Views
Last Modified: 2012-05-10
Hello,
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>
...

Open in new window


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,
});

Open in new window


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>

Open in new window


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 sould 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
		  }		
		}); 
	}
})

Open in new window


Please, any help?
Thanks in advance, I'm getting mad...
0
Comment
Question by:ivanhalen
  • 4
  • 3
7 Comments
 
LVL 6

Expert Comment

by:mickey159
ID: 34215270
First of all,I would say that flowplayer doesn't support IE7 or below...
So you should tell the visitors to update instead of using hacks.
Try the below code:
$(".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: $(this).attr('href'),
			url: $(this).attr('href') // I have not a single video! This should be a parameter taken from href of the clicked link
		  }		
		}); 
	}
})

Open in new window

0
 
LVL 6

Expert Comment

by:mickey159
ID: 34215282
It the above doesn't work,try this:
Try change the href to the direct flv/mp4 link.
For fancybox,try oncomplete or onstart.
$(".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: {
url: $(this).attr('href') // I have not a single video! This should be a parameter taken from href of the clicked link
}		
}); 
}
});

Open in new window

0
 

Author Comment

by:ivanhalen
ID: 34221005
mickey159, thanks for your answers but I tried your codes and they don't work: the first causes nothing, the second makes Firefox crash
I also tried with direct links, or onComplete/onStart: same behaviour...
Please, where did you read that Flowplayer is not IE7 compatible?

Thanks
0
3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

 
LVL 6

Expert Comment

by:mickey159
ID: 34221251
I tried it on IE6 and it told me it doesn't support ie7 or below.
0
 
LVL 6

Assisted Solution

by:mickey159
mickey159 earned 500 total points
ID: 34221410
I don't know for sure, but try this:
var link=$(this).attr('href');
flowplayer("fancy_div", "../flowplayer/flowplayer-3.2.5.swf",link);

Open in new window

Also read this:
http://flowplayer.org/documentation/configuration/clips.html
From the docs, the first parameter of flowplayer is player so please please make sure that using "fancy_div" is OK.

Good luck!
0
 

Accepted Solution

by:
ivanhalen earned 0 total points
ID: 34329263
mickey159, thanks for your effort but FlowPlayer is a nightmare in working with Fancybox
As I wrote inb my first post, I got JWPlayer running in about 15 seconds, so that was my last choice, and definitely abandoned FlowPlayer
Thanks, though
0
 

Author Closing Comment

by:ivanhalen
ID: 34375824
Goodbye FlowPlayer...
Welcome JWPlayer! :-)
0

Featured Post

3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction Got endorsements from your clients?  Great!  There is almost nothing better than word-of-mouth advertising.  But how can you do that on the internet?  Sure you can make a page for endorsement quotations and list them all, but who is …
Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

773 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question