• Floatbox Forum » Support & General Discussion » Before I start question

Before I start question

Page: 1

Author Post
donnya
#1 Mon May 18, 2009 9:43 pm
Guest
I am a noob, but have used Dreamweaver to create a website. I have limited knowlege of HTML and JS, but want to create a page that has several links. Each link would be for a different video. I have the videos and they are FLV flash and would like them to open when the link is clicked and have the webpage dim to grey. When the video is closed, the user could then choose another video to play. Is this possible with floatbox? Any examples of this? What flash player is recommended (assuming I need one)?
admin
#2 Tue May 19, 2009 3:31 am
Administrator
Registered: Aug 2008
Posts: 3382
This is straight-forward floatbox stuff. Take a look at the multimedia tab on my demo page. That's basically a list of videos you can pick from to watch in a floatbox.

Your challenge will be in acquiring a swf-based player to play those flv movie files. You can use this forum's search function and look for postings with the word "flowplayer" in them. You'll get some information about a couple of good players from there.

You could also consider putting your flv files up on a video site like youtube or one of the many others, and playing your videos from there. Most of the samples on that multimedia tab I mentioned are hosted on an online video service.
donnya
#3 Wed May 20, 2009 1:02 am
Guest
I set up a test site on my server.
http://peweevalleysdachurch.org/video2.php
The page contains one video which I setup using flowplayer. That parts seems to work fine. I can't seem to get the floatbox to work however. I have tried so many things, I can't recall them all. One question I have though is "Does a FLV video work?" What am I doing wrong?
admin
#4 Wed May 20, 2009 2:42 am
Administrator
Registered: Aug 2008
Posts: 3382
That's two questions. ;)

Does flv work? Depends what you mean by work. You can't directly load a flv file into floatbox. This is because browsers can't directly show a flv file. Flv files always have to be played by an swf movie player. Flowplayer is one such movie player. So no, you can't just play an flv file in floatbox, but flowplayer can and you can load flowplayer in a floatbox.

Let me walk through the easiest way to do this. The idea is to create a simple standalone page that shows the movie in flowplayer, and that's all it does, and then add a link to that standalone page from your main page that will load that file in floatbox. Here's the standalone page:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://peweevalleysdachurch.org/flowplayer/flowplayer-3.1.0.min.js"></script>
</head> 
<body style="margin:0; padding:0;">

<!-- this A tag is where your Flowplayer will be placed. it can be anywhere -->
<a href="http://peweevalleysdachurch.org/floatbox/videos/medellin1.flv"
   style="display:block; width:425px; height:300px;"
   id="player"
></a>

<!-- this will install flowplayer inside previous A tag. -->
<script type="text/javascript">
   flowplayer("player","http://peweevalleysdachurch.org/flowplayer/flowplayer-3.1.0.swf");
</script>

</body>
</html>

This is just the standard approach from the flowplayer docs for lighting up an flv file. Try it. Load that page in your browser and you will see your movie and nothing else.

Now you need a main page with an anchor on it to show that video page in floatbox. I've called the video page "tvid.html", so my main page looks like this:
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="http://peweevalleysdachurch.org/floatbox/floatbox.css" />
<script type="text/javascript" src="http://peweevalleysdachurch.org/floatbox/floatbox.js"></script>
</head>
<body>
<a href="tvid.html" class="floatbox" rev="width:425 height:300 scrolling:no">Show the vid</a>
</body>
</html>

Try that page out and you should get your video file in floatbox.

A couple of tips: Remember to style the body of the video html file with padding and margins of 0 (as in the example). On your main page, be sure to use the same width and height in the floatbox options as you have set for the video on the video page, and also set scrolling to no so you don't get scrollbars (again, as in the example).
donnya
#5 Wed May 20, 2009 10:09 pm
Guest
Fantastic! It works like a charm. I guess I was trying to put in all onto one page. Now, on my main page I would like to put more than one "Show the vid" link. Will I have to make a separate tvid page for each video, or is there a way to call a specific FLV file?
admin
#6 Wed May 20, 2009 10:19 pm
Administrator
Registered: Aug 2008
Posts: 3382
Yes, a separate wrapper file like tvid for each movie.

There is a way to direct-load flowplayer with a one-liner and no separate html page, but the url string parameters needed for doing this are big time ugly.

See this post for a glimpse of how ugly it can get. Mind you, if you succeed in getting one going, then the rest can just be templated off that. But don't let me distract you. Go with what's already working.
donnya
#7 Wed May 20, 2009 10:46 pm
Guest
I think I will stick with what works for me right now. I only plan to have 5 or 6 videos, so will not be a problem.
Great software! Thanks again.

Page: 1

• Floatbox Forum » Support & General Discussion » Before I start question