FancyBox local video playback assistance

[SSDD]

Greetings

I am developing a website and have FancyBox working correctly - I am
able to display both images and YouTube videos (tip 4), I would also
like to be able to play non-YouTube videos that are located on my web
server such as example.flv, or example.mp4/.mv4 - or whatever format
is best suited, I assume that FancyBox is capable of doing this but I
am unsure about of how to get started, I have experience with HTML/CSS/
PHP but am somewhat new to jQuery/JavaScript, I would really
appreciate if someone could please provide me with an example and/or
instructions.

Thank you,

- James

--
You received this message because you are subscribed to the Google Groups "fancybox" group.
To post to this group, send email to fanc...@googlegroups.com.
To unsubscribe from this group, send email to fancybox+u...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/fancybox?hl=en.

[JFK]

you have to use a swf player (like JW player or flv player)
then make the link to your local player and add the parameters to play
your flv file like:

<a class="player" href="path/player.swf?
file=myfile.flv&amp;autostart=1">open flv with swf player</a>
(parameters vary depending on what player you use ... check your
software provider)

notice the class="player" ... then your script should look like:

$(".player").fancybox({
'padding': 0, //optional
'width': 360, // or your size
'height': 272,
'type': 'swf',
'swf': {
// your flashvars here
'wmode':'transparent',
'allowfullscreen': true
}
});

you can use this scrips for several videos as long as they share the
same dimensions and flashvars, you just need to change the href of
each link
some players like JW player can play mp4 files too

[James Nykiel]

Greetings,

Am I able to use FlowPlayer rather than JW Player, if so do you have an
example or specific instructions for doing so?

[JFK]

do you know how to use flowplayer?

if so, use same script and just change the href accordingly ...
something like:
<a class="player" href="flowplayer.swf?
config={'clip':'myfile.flv'}">open video in flowplayer</a>

[James Nykiel]

Greetings,

I still have not figured this out but I have made some progress - at
this point when I click the video link Flowplayer opens in FancyBox as
expected but unfortunately does not play the video, any suggestions
greatly appreciated.


HEAD:

<script type="text/javascript"
src="http://code.jquery.com/jquery-1.4.2.min.js"></script>

<script type="text/javascript"
src="/fancybox/jquery.easing-1.3.pack.js"></script>
<script type="text/javascript"
src="/fancybox/jquery.fancybox-1.3.1.pack.js"></script>

<script type="text/javascript"
src="/flowplayer/flowplayer-3.1.4.min.js"></script>

<script type="text/javascript" src="/swfobject/swfobject.js"></script>


<script type="text/javascript">
$(document).ready(function() {
$('a.fancyvideo_local').click(function() {
$.fancybox({
'height' : 480,
'href' :
'/flowplayer/flowplayer-3.1.5.swf',
'overlayColor' : '#aaa',
'overlayOpacity' : 0.5,
'padding' : 1,
'speedIn' : 250,
'speedOut' : 125,
'swf' : { 'wmode' :
'transparent', 'allowfullscreen' : 'true' },
'titleShow' : 'false',
'transitionIn' : 'elastic',
'transitionOut' : 'elastic',
'type' : 'swf',
'width' : 640
});
return false;
});
});
</script>


HTML:

<a class="fancyvideo_local"
href="/flowplayer/flowplayer-3.1.5.swf?config={'clip':'/videos/test.flv'}"</a>

[JFK]

well, I gave you a working recipe that says "add milk" but you added
water instead
.... the script of your own has the option href which overrides the
href of your <a> tag

so my recipe is for cake (you said you wanted to bake a cake) ... not
for salad ;)

[James Nykiel]

Greetings,

OK, I am back to the Flowplayer "cake" recipe, I followed your
instructions / example and also removed href option that was overriding
the href of the <a> tag, when I click on the video link FancyBox opens
but no video is played, I assume the problem is with the flashvars or
lack of them, what exactly should I use for the flashvars where you
mention "// your flashvars here" in your instructions / example,
FancyBox is working fine for my images, Flowplayer works fine for my
videos (without FancyBox integration), just a thought but does the fact
that I am developing the website locally make any difference as to why
things are not working - also is JW Player easier to integrate than
Flowplayer, anyhow I would really like to have this working for my
videos and am even willing to buy you a cake for you help, if you are
hungry that is...

[JFK]

if you get this error
201, Unable to load stream or clip file, cannot access the video file
(try loosening Flash security settings): Error #2148
and / or the video doesn't play is because you may be testing
flowplayer locally
in this case you need to upload your files to a server to make them
work with fancybox

is it to obvious to mention that you need both files flowplayer and
flowplayer-controls in the same directory on your server?

[Dustin De Jager]

I know this is way late but i had to do this now and I am working on my local host.

The problem was that the the video file cant be found, you need to path it relative to your .swf players location. so: <a href="assets/jwplayer/player.swf?file=video.mp4&amp;autostart=0" >

file="where your video file is located from the .swf players location"

if yours was in a video folder that is located in the exact same directory your .swf player is then "file=videoName.mp4" will work.

if its in a sub directory(located where your .swf player is) called "videos" then "file=videos/videoName.mp4" will work.

still works likes a charm 3years later!

Thanks.