Order Now AdSolution Sign Up | Login » Bits on the Run Sign Up | Login »

Forums

/

FLV Player will not show (using JavaScript method)

46 replies [Last post]

I do not want to sound dumb, but I am trying to put FLV Player in a HTML document. I put the "<script type="text/javascript" src="_embed/swfobject.js"></script>" in the head section of my page. Then, I added this to the body section:

"<div class="player">Player goes here.</div>
<script type="text/javascript">
var so = new SWFObject('_embed/player.swf','mpl','300','250','9');
so.addParam('allowfullscreen','true');
so. addParam('flashvars','file='_embed/video.flv'&autostart=true');
so.write('player');
</script>"

When I preview the site in IE or Firefox, all that shows is what is in the div tag. I have all of the source files in a folder titled "_embed". Can you please help me figure out why nothing is working? Thanks for your help!

1) There's a double-quote symbol before the first div tag,

2) there's a space in the second so.addParam line, between the period symbol and the letter "a",

3) the relative path for FLV video container files starts at the location of the movie (which is already the "_embed" directory), so use:so.addParam('flashvars','file=video.flv&autostart=true');
4) there is a single-quote symbol after "file=",

5) there is a single-quote symbol after "video.flv",

6) there is a double-quote symbol after the closing script tag.

I fixed all that you said, and it still does not work. What should I do?

Copy & Paste your current page code and I'll check it.

Have you checked the web-availability of your files?

Copy & Paste into your browser's address bar. Quite often there are surprises awaiting.

http://my.domain.com/_embed/swfobject.js
http://my.domain.com/_embed/player.swf
http://my.domain.com/_embed/video.flv

Adjust the domain to yours.

yes, they are all there.

Ok, so post the code.

it still does not work. I have tried on multiple computers. What next?

Post the full page code or a link to your test page.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Memorial Theatre Department - Photo Gallery</title>
<script type="text/javascript" src="_embed/swfobject.js"></script>
<style type="text/css">
<!--
body {
background-image: url(_images/bg.jpg);
background-repeat: repeat-x;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
}
.area {
width: 950px;
background-color: #FFFFFF;
margin-left: 10px;
}
.footer {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #FFFFFF;
background-color: #000000;
bottom: auto;
height: 25px;
line-height: 25px;
width: 950px;
float: left;
}
.top {
background-color: #000000;
padding-right: 20px;
height: 40px;
padding-top: 10px;
color: #FFFFFF;
}
.banner {
height: 132px;
width: 975px;
position: absolute;
left: 7px;
top: 65px;
}
.bannerbg {
height: 132px;
background-image: url(_images/bannerbg.jpg);
}
.black {
}
/*- Menu Tabs H--------------------------- */

    #tabsH {
float:left;
width:100%;
background:#000;
font-size:93%;
line-height:normal;
text-align: right;
      }
    #tabsH ul {
margin:0;
padding:10px 10px 20px 175px;
list-style:none;
      }
.search {
position: absolute;
left: 32px;
top: 27px;
color: #FFFFFF;
width: 386px;
height: 65px;
}
.sbutton {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #FFFFFF;
background-color: #000000;
border: 1px solid #666666;
height: 20px;
width: 45px;
}
.maincontent {
margin: 0px;
padding: 5px;
}
.content {
color: #000000;
padding-top: 25px;
padding-left: 15px;
padding-right: 15px;
float: right;
width: 744px;
background-color: #FFFFFF;
height: 800px;
}
.navigation {
background-color: #354B74;
width: 145px;
float: left;
height: 810px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
padding: 15px;
color: #FFFFFF;
}
.content-text {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
line-height: 20px;
color: #000000;
}
.content-title {
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
font-weight: bold;
color: #000000;
}
.sinput {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
background-color: #000000;
border: 1px solid #999999;
height: 15px;
}
    #tabsH li {
      display:inline;
      margin:0;
      padding:0;
      }
    #tabsH a {
      float:left;
      background:url("_images/tableftH.gif") no-repeat left top;
      margin:0;
      padding:0 0 0 4px;
      text-decoration:none;
      }
    #tabsH a span {
      float:left;
      display:block;
      background:url("_images/tabrightH.gif") no-repeat right top;
      padding:5px 15px 4px 6px;
      color:#FFF;
      }
    /* Commented Backslash Hack hides rule from IE5-Mac \*/
    #tabsH a span {float:none;}
    /* End IE5-Mac hack */
    #tabsH a:hover span {
      color:#FFF;
      }
    #tabsH a:hover {
      background-position:0% -42px;
      }
    #tabsH a:hover span {
      background-position:100% -42px;
      }
a:link {
color: #354B74;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #354B74;
}
a:hover {
text-decoration: underline;
color: #354B74;
}
a:active {
text-decoration: none;
color: #354B74;
}
a.black:link {
color: #FFFFFF;
text-decoration: none;
}
a.black:visited {
text-decoration: none;
color: #FFFFFF;
}
a.black:hover {
text-decoration: underline;
color: #FFFFFF;
}
a.black:active {
text-decoration: none;
color: #FFFFFF;
}
  /*- Menu Tabs H-^^^^^^^^^^^^^^^^^^^-------- */
-->
</style>
</head>

<body>
<div class="area">
  <div class="top">
    <div>
      <div align="right"><a href="index.html" class="black">Home</a> | <a href="aboutus.html" class="black">About Us </a> </div>
    </div>
  </div>
  <div class="bannerbg"></div>
  <div class="banner"><img src="_images/banner.jpg" width="975" height="132" /></div>
  <div id="tabsH">
    <ul>
      <li><a href="index.html" title="Home"><span>Home</span></a></li>
      <li><a href="currentproduction.html" title="BUIHTD"><span>Little Women </span></a></li>
      <li><a href="productions.html" title="Productions"><span>Productions</span></a></li>
  <li><a href="downloads.html" title="Forms"><span>Downloads</span></a></li>
      <li><a href="thespians.html" title="Thespians"><span>Thespians</span></a></li>
      <li><a href="dramaclub.html" title="Drama Club"><span>Drama Club</span></a></li>
      <li><a href="aboutus.html" title="About Us"><span>About Us</span></a></li>
    </ul>
  </div>
  <div class="navigation">
     <p align="left"><img src="_images/linebreak.jpg" width="147" height="2" vspace="20" />
<a href="gallery.html" class="black">Photo Gallery</a>
     <p align="left"><a href="castlist.html" class="black">Casts &amp; Crews </a>
     <p align="left"><a href="downloads.html" class="black">Downloads</a></p>
    <p align="left"><a href="seating.html" class="black">Auditorium Seating</a><img src="_images/linebreak.jpg" width="147" height="2" vspace="20" /></p>
    <p>&nbsp;</p>
  </div>
 
  <div class="content">
    <p><span class="content-title">Photo Gallery </span> </p>
   
    <div class="player">Player goes here.</div>
    <script type="text/javascript">
  var so = new SWFObject('_embed/player.swf','mpl','300','250','9');
  so.addParam('allowfullscreen','true');
  so.addParam('flashvars','file=_embed/video.flv&autostart=true');
  so.write('player');
</script>
    <p align="center" class="content-text">All of the photos above were taken by the cast and crew of <em>Little Women</em>. The photo gallery is updated constantly, so check back often for the latest updates!</p>
  </div>
  <p class="content-text"></p>
  <div class="footer">
  <center>
    Created By the Reitz Memorial High School Theatre Department 2008 <br />
  </center>
  </div>
</div>
</body>
</html>

Ok, I'll have a look.

        Later...    :)

Find this code:

<script type="text/javascript">
var so = new SWFObject('_embed/player.swf','mpl','300','250','9');
so.addParam('allowfullscreen','true');
so.addParam('flashvars','file=_embed/video.flv&autostart=true');
so.write('player');
</script>

Replace it with this code (Copy & Paste):

        <script type="text/javascript">
          var so = new SWFObject('_embed/player.swf', 'mpl', '300', '250', '9');
              so.addParam('allowfullscreen',    'true');
              <strong>so.addVariable('file',            'video.flv');</strong>
              so.addVariable('autostart',       'true');
              so.write('player');
        </script>

[i]You missed point 3) in my post above showing you how to correct the video file path.

3) the relative path for FLV video container files starts at the location of the movie (which is already the "_embed" directory).[/i]

Somehow, it still does not work. Is there another way to embed?

try use the full (confirmed) path to all the files in your code:

http://my.domain.com/_embed/swfobject.js
http://my.domain.com/_embed/player.swf
http://my.domain.com/_embed/video.flv

you can then change to relative paths when you have seen it work...

I am having the same issue as Kevin. The only thing that shows up is "this text will be replaced"

This is my player code:

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

<div id="player">This text will be replaced</div>

<script type="text/javascript">
var so = new SWFObject('embed/player.swf','mpl','485,'362','9');
so.addParam('allowscriptaccess','always');
so.addParam('allownetworking','all');
so.addParam('allowfullscreen','true');
so.addParam('flashvars','&file=../test.flv');
so.write('player');
</script>

Any help anyone can offer would be greatly appreciated.

@Jeff - have you uploaded the swfobject.js and player.swf to the right place ?

try use the full path (including http://yourdomain.etc) for the various files in the script and confirm that they are where you expect by pasting the url into the browser address line and press enter - then they should start download...

also make sure your flash browser plugin is up to date and working -
please note that sometimes a deinstall is needed before the update will function properly -
and that IE and the other browsers use different plugins so you will have to check the version in each...

adobe flash versiontest - http://www.adobe.com/products/flash/about/
adobe flash deinstall - http://kb.adobe.com/go/tn_14157
adobe flash install - http://www.adobe.com/go/getflashplayer

Is it possible that javascript's disabled in your browser?

also having this problem!
gone thru code with a fine tooth comb

all paths work fine
video displays when using setup wizard

anyway, embed method works - so I'll go with that

sudha

... same prob

I had - and in a way still have - the same prob. But i pelaced 'mpl' with 'player' and so.write('player') with so.write('preview'). This does work.

I must admit i don't know the difference between the codes. But, hey, i'm not into this... :-)

Oh, forgot: The time is not counting and the progress bar shows no progress. Any idea? This is my code:

<p id='preview'>The player will show in this paragraph</p>
<script type='text/javascript' src='js/swfobject.js'></script>
<script type='text/javascript'>
var so = new SWFObject('swf/player.swf','player','300','225','9');
so.addParam('allowfullscreen','true');
so.addParam('allowscriptaccess','always');
so.addParam('flashvars','file=swf/cobra.swf');
so.write('preview');
</script>

@FJazz - from - http://developer.longtailvideo.com/trac/wiki/FlashFormats

Though SWF files also load in the player, it is discouraged to use them. The player cannot read the duration and dimensions of SWF files and cannot control its volume or playback.

to see the duration and a working progressbar you will have to convert the cobra.swf to a proper video format like .flv - you can try use a service like - http://media-convert.com - but note not all .swf files will convert at all - best is if you can export directly to a videoformat from the original material...

@andersen: thanks for the answer. In fact my original videoformat is an .mpg. But it's 200 MB! I already converted it to mp4. It's now 66MB. But i don't get the mp4 to run properly. I hear the sound instantly (used mp4box) but i don't see anything! That's why i read this threat and that's why i'm playing with the formats. I would prefer mp4.

Any ideas on this? *sniff*

tx

Oh, here is my code for .mp4:

<p id='preview'>The player will show in this paragraph</p>
<script type='text/javascript' src='js/swfobject.js'></script>
<script type='text/javascript'>
var so = new SWFObject('swf/player.swf','player','300','225','9');
so.addParam('flashvars','&file=cobra.mp4&fullscreen=true');
so.write('preview');
</script>

I'm using Flash Player 10 and JW 4.2.90

@FJazz,

The flashvar fullscreen is read-only, so you might as well removi it from your code.

Reference:

      http://developer.longtailvideo.com/trac/wiki/FlashVars#Behaviour

The Adobe Flash Player only supports these video codecs, regardless of the container format being used.
List of codecs supported by Adobe Flash Player [http://kb.adobe.com/selfservice/viewContent.do?externalId=kb402866]

If you are using an MP4 container, you probably want to use the H.264 video codec when encoding your video.

@Will,

yes, fullscreen is useless. I will remove it.

Well, i 'm not realy into this. If you say "...you probably want to use the H.264 video codec when encoding your video." you're talking about using mp4box to do so? I used the command line "mp4box -isma cobra.mp4" on my .mp4. I got the line from a thread in the forum. How do i have to change it if i want to us the H.264 codec? This might be a noobish question ... :-) because i thought .mp4 would automatically come with h.264!?

tx again!

MP4 is a container format for audio and video streams, metadata, and lots of other junk.

When you encode the video, choose the H.264 codec for the video and the AAC codec for the audio.

After you have encoded the video, use MP4Box to move the MOOV atoms to the beginning of the MP4 container so the file will start playing soon after it starts to download. Some encoders also have a Fast-Start option which does the same thing.

yes, i stumbled upon SUPER yesterday and did exactly that. Works perfectly! Thanks again

I have this player working in Firefox but does not work in IE. Would you happen to know what could be causing this?

gjvgjgv

I was wondering if any one could help me with a small problem. I'm trying to add a "loading" icon (.gif) to my embedded flv in my html page. The flv is a progressive download, and starts playing quickly on most computers with decent internet connects. My boss, wants this icon to be displayed when it begins and starts up. Our internet connection here at work is extremely slow, so this is why she wants it done. Any help would be great, or someone that could point me in the right direction... I don't really want a progress bar, I tried that and as soon as the flv loads the progress bar disappears, and you still have to wait a couple seconds for the video to get going.

here is a link to the page.

www.hype413.com/videos/rest_reel.html

Thanks a lot,
Tyler

hi
where can i get swfobject.js file

Hi ,
i am newbie , would you please explain to me ,how to ebemd my video without black screen?

So ,when my video start i just want to see begining of movie,but something like light box,trought this,not to see balck screen ..

Can anyone help me about that?

I am using joomla 1.5.8

I have the same problem too. Tried everything I can but still no joy. This should be simple but I am at a loss now. Please help. Uploaded page etc to:
http://www.skylightpublishing.com/testing/testing_javascript_audio-media%20player.htm

Can anyone see why this won't work?

note - the post added the %20 where in fact the url includes a space between madia and player

For simplicity and for testing, I copied the swf and js files into the same testing folder as the audio mp3 file

Hi guys
I have seen so much of your problems and solutions. I am using the JW player through javascript. I have a small problem that while playing the content it's not buffering the file. when I move the cursor it start streaming again. can we make it happen that only one time it reads from source and it buffers the content while playing. like you tube player do...here is my javascript code.

s1 = new SWFObject("swf/player.swf", "songPlayerId", "300", "220", "9", "#336699");

s1.addParam("allowfullscreen","true");

s1.addParam("allowscriptaccess","always");

s1.addVariable('file',theFile);
s1.addVariable('streamer','rtmp://localhost/indiemusic');
s1.addVariable("width","300");
s1.addVariable("height","220");
s1.addVariable("displayheight","220");
s1.addVariable("autostart","true");
s1.addVariable("repeat","list");
s1.addVariable("controlbarsize","5");
s1.addVariable("playlistsize","50");
s1.addVariable("enablejs","true");
s1.addVariable("javascriptid","songPlayerId");
s1.write("placeholder");

sorry guys I have forgot to request you to provide the solution. thanks.

Hey you guys(gals) I had somewhat of the same problem. Here is what I did just to get my movie to show up. First I uploaded all the files ie; video (flv), player.swf, JS to my server.

Then I put this code in.

<p id='preview'>The player will show in this paragraph</p>

<script type='text/javascript' src='en/swfobject.js'></script>
<script type='text/javascript'>
var s1 = new SWFObject('/en/player.swf','player','400','300','9');
s1.addParam('allowfullscreen','true');
s1.addParam('allowscriptaccess','always');
s1.addParam('flashvars','file=michikusa_eniwa.flv');
s1.write('preview');
</script>

<embed
src="/en/player.swf"
width="427"
height="260"
bgcolor="undefined"
allowscriptaccess="always"
allowfullscreen="true"
flashvars="file=/en/michikusa_eniwa.flv"
/>

This seemed to get me going in the right direction. Now all I have to do is figure out what the hell to do next. JS is a hassle as is html for missing slashes or spaces etc, but my best friend on the internet "Google" always is there to help.

Cheers and good luck.

gdfsgfsdgdfgsdfgfd

hahahaha i think i might have fig out the issue.... at least it worked for me!!!

the javascript part of the code has to after the div that the player is embeded too..

<div id="test_videos">
<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" width="112" height="33" /></a>
</div>

<script type="text/javascript">
var so = new SWFObject('player.swf','mpl','230','155','9');
so.addParam('allowscriptaccess','always');
so.addParam('allowfullscreen','true');
so.addParam('flashvars','&file=test.flv&image=test.jpg&screencolor=000000&stretching=exactfit');
so.write('test_videos');
</script>

in older verisons of you would put the javascript part above... now you MUST put it below.

hope that helps!

Hi,

Can someone tell me why a flash file will show up using the full URL,, http://www.anysite.com
but not,,,,,,,, http://anysite.com ?

has me baffled, please help

Adobe Flash Player same domain security restrictions require that the movie (mediaplayer.swf or player.swf or imagerotator.swf) and all data files (playlist.xml, captions.xml, skin.swf, plugin, etc.) MUST come from the EXACT same domain unless you put a cross-domain policy file on the root of the server that is serving the data files.

Reference: http://kb.adobe.com/selfservice/viewContent.do?externalId=tn_14213

Therefore, you must either:

1) serve the data file(s) (playlist.xml, captions.xml, skin.swf, plugin, etc.) from the same domain as the movie (mediaplayer.swf or player.swf or imagerotator.swf),

2) or serve the data files through a proxy at the same domain as the movie, so it appears that they both come from the same domain,

3) or place a cross-domain policy file on the server that is hosting the data file(s).

Domains must be EXACTLY the same. "www.domain.com" and "domain.com" are not exactly the same.

There are additional relative path origin quirks for FLV files.

See the tutorial Embedding Flash here: http://www.longtailvideo.com/support/tutorials

zxc xc xz

Hallo!
I'm sorry for my stupid question.
I'm working with Adobe Golive and I can view with success my SWF and .mp4 video in the JW FLV Player.
Now I want to PUT the SWF Player INTO a cell (in the body of the page)......I have worked a little with Div and CSS but with no success......do you have any suggestion??

Thank-you!

ettore

Problem solved.
This code:

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

Should be in the HEAD of the html page.

And the code:

<div id="mediaspace">PLAYER PLACEHOLDER</div>
<script type="text/javascript">
var so = new SWFObject('player.swf','mpl','772','308','9');
so.addParam('allowfullscreen','true');
so.addParam('allowscriptaccess','always');
so.addParam('wmode','opaque');
so.addVariable('file','asle-playlist.xml');
so.addVariable('playlistsize','260');
so.addVariable('playlist','right');
so.write('mediaspace');
</script>

Can be where I want in the BODY of my html page.

Unfortunately this very important detail IS NOT clearly indicated in all your website and in the tutorials.

Anyway JW is a wonderful player.......and just a nightmare if you are just a designer (like me...) and NOT a programmer.

Bye!

ettore

Hi Guys,

I have read through all the advice above and I think I am at at least the right page. I have a .swf (carousel_large.swf) file that is in my root directory. I reference this from the root html page and it works fine. When I go two levels deeper and reference the same file the background shows up but not the rotating content. There is also an xml file in the root folder which is where the images and links used are referenced. I have tried using both relative and full paths which just do not work! I have tried pasting the full path into the browser and this works fine.

I would appreciate any help you could give me.