Solved

Getting Flowplayer to work in a Fancybox

Posted on 2010-11-24
7
2,141 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
MIM Survival Guide for Service Desk Managers

Major incidents can send mastered service desk processes into disorder. Systems and tools produce the data needed to resolve these incidents, but your challenge is getting that information to the right people fast. Check out the Survival Guide and begin bringing order to chaos.

 
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

Forrester Webinar: xMatters Delivers 261% ROI

Guest speaker Dean Davison, Forrester Principal Consultant, explains how a Fortune 500 communication company using xMatters found these results: Achieved a 261% ROI, Experienced $753,280 in net present value benefits over 3 years and Reduced MTTR by 91% for tier 1 incidents.

Question has a verified solution.

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

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?
This article discusses how to implement server side field validation and display customized error messages to the client.
The viewer will learn how to dynamically set the form action using jQuery.
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…

733 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