Solved

Getting Flowplayer to work in a Fancybox

Posted on 2010-11-24
7
2,136 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
Space-Age Communications Transitions to DevOps

ViaSat, a global provider of satellite and wireless communications, securely connects businesses, governments, and organizations to the Internet. Learn how ViaSat’s Network Solutions Engineer, drove the transition from a traditional network support to a DevOps-centric model.

 
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

Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

Question has a verified solution.

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

Suggested Solutions

Introduction JSON is an acronym for JavaScript Object Notation.  It is a text-string data transport mechanism, capable of representing simple or complex data structures in a consistent and easy-to-read manner.  Similar in concept to XML, but more e…
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
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)
The viewer will learn the basics of jQuery including how to code hide show and toggles. 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…

856 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