HTML Tutorial


 /help/HTML Help Forum   FAQFAQ   SearchSearch   MemberlistMemberlist   RegisterRegister 
 ProfileProfile   Log in to check your private messagesLog in to check your private messages   Log inLog in 
RegisterRegister - Not registered yet? Got something to say? Join HTML Code Tutorial!
Code for putting a border around FLV Player
Goto page 1, 2  Next
Post new topic   Reply to topic    HTML Help Forum -> General HTML
View previous topic :: View next topic  
Author Message
Mike H



Joined: 28 Sep 2009
Posts: 17
PostPosted: Mon Sep 28, 2009 2:31 pm     Code for putting a border around FLV Player Reply with quote
Sorry for the simple newby questions......I'm still learning.

I have a simple webpage (http://www.masoncreekstudios.com/) with the following code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>
<title>Mason Creek Studios</title>

<META http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">

</head>

<body>

<body style="background:#7C90B4">

<b><font size="14"><i>Mason Creek Studios</i></font></b>
<BR>

<b><font face=""><font size="4"><i>Current Test Mixes</i></font>:</font></font></b>
<br>
<font face=""><font size="3"><i>Note: Download Adobe Flash Player if you can't play these m4a files: <A HREF="http://get.adobe.com/flashplayer/">flashplayer download site</A></i></font>
<br>

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

<div id='mediaspace'>Note: Download Adobe Flash Player if you can't play these m4a files: http://get.adobe.com/flashplayer/ </div>

<script type='text/javascript'>
var so = new SWFObject('player.swf','mpl','470','320','9');
so.addParam('allowfullscreen','true');
so.addParam('allowscriptaccess','always');
so.addParam('wmode','opaque');
so.addVariable('file','playlist.xml');
so.addVariable('playlistsize','10');
so.addVariable('playlist','over');
so.addVariable('skin', 'metarby10.swf');
so.write('mediaspace');
</script>

<br>
<IMG SRC="High school band photo.jpg" width="1027" height="549" border=10 style="border-color=black; border-style:solid" >


<br>
<br>

</body>

</html>

I want to put a border around the FLV Player (player.swf). I tried the following code:

<DIV style="border-color:red; border-width:5px; border-style:solid">player.swf</DIV>

If I place this code inside script type/script, nothing happens.
If I place it outside script type/script, I get a box with “player.swf” written inside it.

So, obviously this is not the correct code.

Could someone please tell me how the code should be written to place a red border around the FLV Player?

BTW, I am also using the skin metarby10.swf, in case this affects the code.

Last edited by Mike H on Mon Sep 28, 2009 6:03 pm; edited 2 times in total
sticks464



Joined: 31 Dec 2006
Posts: 2630
PostPosted: Mon Sep 28, 2009 3:24 pm     Reply with quote
This line tells the swf to display in the mediaspace div
Code:
so.write('mediaspace');


Style the mediaspace div
Code:
<div id='mediaspace' style="border:5px solid #f00;">Note: Download Adobe Flash Player if you can't play these m4a files: http://get.adobe.com/flashplayer/ </div>
Mike H



Joined: 28 Sep 2009
Posts: 17
PostPosted: Mon Sep 28, 2009 3:50 pm     Reply with quote
sticks464 wrote:
This line tells the swf to display in the mediaspace div
Code:
so.write('mediaspace');


Style the mediaspace div
Code:
<div id='mediaspace' style="border:5px solid #f00;">Note: Download Adobe Flash Player if you can't play these m4a files: http://get.adobe.com/flashplayer/ </div>


When I add this code right after </script>, I get a red border around the text "Note: Download Adobe Flash Player if you can't play these m4a files: http://get.adobe.com/flashplayer", rather than a red border around the player itself.

If I put the code above </script>, nothing happens.

What am I doing wrong?
sticks464



Joined: 31 Dec 2006
Posts: 2630
PostPosted: Mon Sep 28, 2009 4:33 pm     Reply with quote
Post the code you are using.
Mike H



Joined: 28 Sep 2009
Posts: 17
PostPosted: Mon Sep 28, 2009 5:31 pm     Reply with quote
sticks464 wrote:
Post the code you are using.


I am using the code I show in my first post.
I am simply inserting the line of code you wrote as an extra line.

The section of code referring to the player is this:

<script type='text/javascript'>
var so = new SWFObject('player.swf','mpl','470','320','9');
so.addParam('allowfullscreen','true');
so.addParam('allowscriptaccess','always');
so.addParam('wmode','opaque');
so.addVariable('file','playlist.xml');
so.addVariable('playlistsize','10');
so.addVariable('playlist','over');
so.addVariable('skin', 'metarby10.swf');
so.write('mediaspace');
</script>

I first inserted your line of code

<div id='mediaspace' style="border:5px solid #f00;">Note: Download Adobe Flash Player if you can't play these m4a files: http://get.adobe.com/flashplayer/ </div>

above
</script>
When I did this, nothing happened.

Then, I inserted it after
</script>
In this case, I got a box with this text inside it:
"Note: Download Adobe Flash Player if you can't play these m4a files: http://get.adobe.com/flashplayer/"

Sorry, I know I am doing something dumb......I just don't know what. Sad
sticks464



Joined: 31 Dec 2006
Posts: 2630
PostPosted: Mon Sep 28, 2009 5:39 pm     Reply with quote
Try putting your script inside a div and styling it.
Code:
<div id='mediaspace'>Note: Download Adobe Flash Player if you can't play these m4a files: http://get.adobe.com/flashplayer/ </div>
<div id="movie" style="border:5px solid #f00; width:470px; height:320px;">
<script type='text/javascript'>
var so = new SWFObject('player.swf','mpl','470','320','9');
so.addParam('allowfullscreen','true');
so.addParam('allowscriptaccess','always');
so.addParam('wmode','opaque');
so.addVariable('file','playlist.xml');
so.addVariable('playlistsize','10');
so.addVariable('playlist','over');
so.addVariable('skin', 'metarby10.swf');
so.write('mediaspace');
</script>
</div>
Mike H



Joined: 28 Sep 2009
Posts: 17
PostPosted: Mon Sep 28, 2009 5:49 pm     Reply with quote
sticks464 wrote:
Try putting your script inside a div and styling it.


This code inserts the following between the player and the jpeg:

- The text:
"Note: Download Adobe Flash Player if you can't play these m4a files: http://get.adobe.com/flashplayer/"

- A red box with nothing inside it.
sticks464



Joined: 31 Dec 2006
Posts: 2630
PostPosted: Mon Sep 28, 2009 7:39 pm     Reply with quote
Ok, this should work. However tested without a swf.

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Mason Creek Studios</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
var flashvars = {};
flashvars.file = "playlist.xml";
flashvars.playlistsize = "10";
flashvars.playlist = "over";
flashvars.skin = "metarby10.swf";
var params = {};
params.wmode = "opaque";
params.allowfullscreen = "true";
params.allowscriptaccess = "always";
var attributes = {};
attributes.id = "mediaspace";
swfobject.embedSWF("player.swf", "mediaspace", "470", "320", "9.0.0", false, flashvars, params, attributes);
</script>

<style type="text/css">
body {background:#7C90B4;}
h1 {
   font-size:32px;
   font-style:italic;
}
h3 {
   font-size:16px;
   font-style:italic;
}
p {
   font-size:14px;
   font-style:italic;
}
#mediaspace {
   width:470px;
   height:auto;
   border:5px solid #f00;
   margin-bottom:10px;
}
img.band {
   border:10px solid #000;
   margin:10px 0;
}
</style>

</head>

<body>
<body>

<h1>Mason Creek Studios</h1>

<h3>Current Test Mixes</h3>
<p>Note: Download Adobe Flash Player if you can't play these m4a files: <a href="http://get.adobe.com/flashplayer/">flashplayer download site</a></p>
<br>

<div id="mediaspace">
<a href="http://www.adobe.com/go/getflashplayer">
<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
</a>
</div>

<img class="band" src="High school band photo.jpg"  height="549" width="1027" alt="High School Band" />

</body>
</html>
Mike H



Joined: 28 Sep 2009
Posts: 17
PostPosted: Mon Sep 28, 2009 8:32 pm     Reply with quote
sticks464 wrote:
Ok, this should work. However tested without a swf.



Thanks so much for taking the time to write the code!

Close, but not quite there.
This code put a red border around the "Get Adobe Flash Player" link, rather than around the FLV Player. The player doesn't appear.
Mike H



Joined: 28 Sep 2009
Posts: 17
PostPosted: Mon Sep 28, 2009 8:53 pm     Reply with quote
Finally, here is the code that works:

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

<div id='mediaspace' style="width:470px;height:320px;border:3px solid #f00;">Note: Download Adobe Flash Player if you can't play these m4a files: http://get.adobe.com/flashplayer/ </div>


<script type='text/javascript'>
var so = new SWFObject('player.swf','mpl','470','320','9');
so.addParam('allowfullscreen','true');
so.addParam('allowscriptaccess','always');
so.addParam('wmode','opaque');
so.addVariable('file','playlist.xml');
so.addVariable('playlistsize','10');
so.addVariable('playlist','over');
so.addVariable('skin', 'metarby10.swf');
so.write('mediaspace');
</script>

You can see it here:
http://www.masoncreekstudios.com/

You were basically there the first time, sticks464........I just didn't understand where to place the code. Duh. Sorry I didn't understand proper placement the first time.

Thanks so much for helping on this!!! I really appreciate it.
Mike
sticks464



Joined: 31 Dec 2006
Posts: 2630
PostPosted: Tue Sep 29, 2009 3:47 am     Reply with quote
You need to use a complete doctype to insure all browsers can render the code correctly.
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

You should also make use of the w3c validator to find errors in your code.
Mike H



Joined: 28 Sep 2009
Posts: 17
PostPosted: Tue Sep 29, 2009 6:46 am     Reply with quote
sticks464 wrote:
You need to use a complete doctype to insure all browsers can render the code correctly.
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

You should also make use of the w3c validator to find errors in your code.


Thanks so much for your help!!

I ran http://www.masoncreekstudios.com/

thru Validator...........and it found 5 errors. Rats.

I take it I need to figure out how to resolve these, even though it appears to be working fine. I'll be starting another thread, I guess, to get help on this.

Anyway, good progress.
Thanks again.
sticks464



Joined: 31 Dec 2006
Posts: 2630
PostPosted: Tue Sep 29, 2009 1:13 pm     Reply with quote
From your code I see your a table user from the way you use styling attributes. Use the css I posted and it will alleviate the errors.
Mike H



Joined: 28 Sep 2009
Posts: 17
PostPosted: Tue Sep 29, 2009 2:54 pm     Reply with quote
sticks464 wrote:
Use the css I posted and it will alleviate the errors.


I would be very happy to use your code, but it doesn't give me the FLV Player. I get the text at the top (different size) and the jpeg..........but instead of the player inside a red border, I get a link to the Flash Player inside a red border.

So, I need to figure out how I need to change your code.

Is it obvious to you what I need to do to modify your code to get the player?

The latest code I am using is which works (except validator reports 5 errors) is:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
<title>Mason Creek Studios</title>

<META http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">

</head>

<body>

<body style="background:#7C90B4">

<b><font size="14"><i>Mason Creek Studios</i></font></b>
<BR>

<b><font face=""><font size="4"><i>Current Test Mixes</i></font>:</font></font></b>
<br>
<font face=""><font size="3"><i>Note: Download Adobe Flash Player if you can't play these m4a files: <A HREF="http://get.adobe.com/flashplayer/">flashplayer download site</A></i></font>
<br>
<br>

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


<div id='mediaspace' style="width:470px;height:320px;border:4px solid #DF3232;">Note: Download Adobe Flash Player if you can't play these m4a files: http://get.adobe.com/flashplayer/ </div>


<script type='text/javascript'>
var so = new SWFObject('player.swf','mpl','470','320','9');
so.addParam('allowfullscreen','true');
so.addParam('allowscriptaccess','always');
so.addParam('wmode','opaque');
so.addVariable('file','playlist.xml');
so.addVariable('playlistsize','10');
so.addVariable('playlist','over');
so.addVariable('skin', 'metarby10.swf');
so.write('mediaspace');
</script>



<br>
<IMG SRC="High school band photo.jpg" width="1027" height="549" border=8 style="border-color=black; border-style:solid" >


<br>
<br>

</body>

</html>
sticks464



Joined: 31 Dec 2006
Posts: 2630
PostPosted: Tue Sep 29, 2009 3:28 pm     Reply with quote
What I'm saying is you can do it like this

Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Mason Creek Studios</title>

<style type="text/css">
body {background:#7C90B4;}
h1 {
   font-size:32px;
   font-style:italic;
}
h3 {
   font-size:16px;
   font-style:italic;
}
p {
   font-size:14px;
   font-style:italic;
}
#mediaspace {
   width:470px;
   height:320px;
   border:4px solid #DF3232;
}
.band {
   border:10px solid #000;
   margin-top:10px;
}
</style>
 
</head>

<body>
<h1>Mason Creek Studios</h1>

<h3>Current Test Mixes</h3>
<p>Note: Download Adobe Flash Player if you can't play these m4a files: <a href="http://get.adobe.com/flashplayer/">flashplayer download site</a></p>

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

<div id='mediaspace'>Note: Download Adobe Flash Player if you can't play these m4a files: http://get.adobe.com/flashplayer/ </div>

<script type='text/javascript'>
var so = new SWFObject('player.swf','mpl','470','320','9');
so.addParam('allowfullscreen','true');
so.addParam('allowscriptaccess','always');
so.addParam('wmode','opaque');
so.addVariable('file','playlist.xml');
so.addVariable('playlistsize','10');
so.addVariable('playlist','over');
so.addVariable('skin', 'metarby10.swf');
so.write('mediaspace');
</script>

<p class="band"><img src="High school band photo.jpg"  height="549" width="1027" alt="High School Band"></p>
</body>
</html>
Display posts from previous:   
Post new topic   Reply to topic    HTML Help Forum -> General HTML All times are GMT - 8 Hours
Goto page 1, 2  Next
Page 1 of 2

 
Jump to:  
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum
HTML Help Archive
Powered by phpBB © 2001, 2005 phpBB Group
HTML Help topic RSS feed 
 
DARFUR
Get a Stop the Genocide poster at SaveDarfur.org.
Also see Eyes on Darfur.
HOSTING / DESIGN
$1.99 Domain Registration
Cheap Web Hosting
Website Templates
MAKE MONEY
Sell Domain Names
Sell Website Templates

Home   |   Tutorials   |   Forum   |   Quick List   |   Link Directory   |   About
Copyright ©1997-2002 Idocs and ©2002-2007 HTML Code Tutorial