Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

Getting Flowplayer to work in a Fancybox

Posted on 2010-11-24
7
Medium Priority
?
2,174 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

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

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
A while back, I ran into a situation where I was trying to use the calculated columns feature in SharePoint 2013 to do some simple math using values in two lists. Between certain data types not being accessible, and also with trying to make a one to…
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)
Suggested Courses

618 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