Solved

Getting Flowplayer to work in a Fancybox

Posted on 2010-11-24
7
2,128 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

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

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

Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
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)

867 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

Need Help in Real-Time?

Connect with top rated Experts

19 Experts available now in Live!

Get 1:1 Help Now