Name is required.
Email address is required.
Invalid email address
Answer is required.
Exceeding max length of 5KB

Add background image


how do I add a background image to the player when I have it set to "Autoplay=False"

16 Community Answers

JW Player

User  
0 rated :

Do you mean an image that shows before the user clicks play?

If so, I just use the "Image" flashvar.

http://code.jeroenwijering.com/trac/wiki/FlashVars

http://www.jeroenwijering.com/?page=wizard&example=15

Hope this helps ya.

JW Player

User  
0 rated :

thanks! but could you give me a example line of code? I am completely new at this.

JW Player

User  
0 rated :

Post your code or a link to your test page.

There are many ways of embedding the player; we can't show you the correct code without seeing the method that you have chosen.

JW Player

User  
0 rated :

Hi,

I've got the preview image working - the image is shown during the bufferlength time. What I would like is for this picture (preview.jpg) to show up at the end of the video as well. At the moment it ends with a black screen with the the white play icon. I do not want the video to repeat.

The embed code is as follows:

<script type="text/javascript">
var s1 = new SWFObject("player.swf","ply","320","240","9","#FFFFFF");
s1.addParam("allowfullscreen","false");
s1.addParam("allowscriptaccess","always");
s1.addParam("image","preview.jpg");
s1.addParam("autostart","true");
s1.addParam("bufferlength","20");
s1.addParam("screencolor","ffffff");
s1.addParam("controlbar","none");
s1.addParam("flashvars","file=video.flv&image=preview.jpg&autostart=true&bufferlength=20&screencolor=ffffff&controlbar=none");
s1.write("container");
</script>

JW Player

User  
0 rated :

I too would like to have the preview image show up at the end of the movie.

Here is the code I'm currently using:

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

<script type="text/javascript">
var so = new SWFObject('player.swf','mpl','521','284','9');
so.addParam('allowscriptaccess','always');
so.addParam('allowfullscreen','true');
so.addParam('flashvars','&file=jg_v3.mp4&image=jg_posterFrame.jpg&skin=nacht.swf&backcolor=000000&captions=jg.xml&title=Meet Jane G.&duration=00:02:00');
so.write('player');
</script>

JW Player

User  
0 rated :

Hi all

I am also wanting the image to display at the end of the video. I am currently using version 4.1. Is there anyway to do this?

Thanks in advance

JW Player

User  
0 rated :

How do I add a background to a clip I made?

JW Player

User  
0 rated :


I am not able to get the background image to show prior to the video playing. My code segment is shown below. I've read though the suggestions and this doesn't seem to work. Can someone explain what I need to do to add the background image?

Thanks,

MikeD


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

<script type='text/javascript' src='FlashPlayerFiles/swfobject.js'></script>
<script type='text/javascript'>
var s1 = new SWFObject('FlashPlayerFiles/player.swf','player','480','320','9');
s1.addParam('allowfullscreen','true');
s1.addParam('allowscriptaccess','always');
s1.addParam('image','Copva_Logo_480x274.jpg');
s1.addParam('flashvars','file=090526_EllisRanch_Edit2.flv&image=Copva_Logo_480x274.jpg');

s1.write('preview');
</script>

JW Player

User  
0 rated :


*parameters* so.addParam() are for the Adobe Flash Player.

*http://kb2.adobe.com/cps/127/tn_12701.html*

*flashvars* (flash variables) so.addVariable() are for the JW FLV Player.

*http://developer.longtailvideo.com/trac/wiki/FlashVars*

bc.. <pid="preview">*<ahref="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash">GettheAdobeFlashPlayertoseethisvideo.</a>*</p>

<scriptsrc="FlashPlayerFiles/swfobject.js"></script>

<scripttype='text/javascript'>
vars1=newSWFObject('FlashPlayerFiles/player.swf','player','480','320','9.0.124');
s1.addParam('allowscriptaccess','always');
s1.addParam('allowfullscreen','true');
s1.addVariable('image','Copva_Logo_480x274.jpg');
s1.addVariable('file','090526_EllisRanch_Edit2.flv);
s1.write('preview');
</script>



You should also use a more informative _Alternative Content Message_ and specify a minimum Adobe Flash Player version of v9,0,124,0.

JW Player

User  
0 rated :


Hello to all,
I use the FLV Media Player 4.6 and to play the video i use the code as below:

<embed src='index_htm_files/player.swf'width='200'height='150'bgcolor='undefin ed'allowscriptaccess='always'allowfullscreen='true 'flashvars='file=video.flv'/></embed>


How I can get background image or first frame?
Many thanks
Jan

JW Player

User  
0 rated :

Thank you very much Hobbs.
I did as you advised ....but is not working ..I am sure that I missing something as I am new to this.
.

Could you please advice where I should put the image .jpeg and what does mind valid image file?
Sorry for my ignorance but this is very new for me.
Is there any other workflow I can use to play flash video from my web?


I use Xara Web Designer and my work-flow is as bellow.


Export your (as yet unfinished) page (site) to a folder on your HDD as index.htm

Download the JW FLV player
Unzip and rename player-viral.swf to player.swf (no need to use the other files in the .zip)
(* or you could use the player.swf I've included inside my attached example)

Copy player.swf to your index_htm_files folder.
Place your video.flv in the index_htm_files folder (I used PAZERA Video to Flash converter to convert video.)

Draw your placeholder the same size as your video output, allowing 20pix for the player controls.
Place the code below into your placeholder via 'Web Properties>>Replace with HTML code:'.

<embed src='index_htm_files/player.swf'width='320'height='260'bgcolor='undefin ed'allowscriptaccess='always'allowfullscreen='true 'flashvars='file=video.flv'/></embed>

You can edit the width and height if your video differs (be careful!)

Save your *.web or *.xar
Export and test (I use FireFox, Chrome or Opera)





Please advice
Thanks in advance
Jan

JW Player

User  
0 rated :

With no pathbc.. image=image.jpg
the image file must be in the same directory as the HTML document that your Flash content is embedded in.

A valid image file means a jpg, gif, or png image that is Internet accessible.

So if your page is:bc.. http://www.domain.com/index.html
then the image has to be atbc.. http://www.domain.com/image.jpg
and must load when you put that URI into your browser.

JW Player

User  
0 rated :

Hey Hobbs-I am speechless- Thank you so much for the advice.It works perfectly.
I always respect people who can share they knowledge .
Thank you again
Jan

JW Player

User  
0 rated :

player.swf version 4.2 will display preview image at end of video (and no watermark)

it can be downloaded here...
http://developer.longtailvideo.com/trac/browser/tags/mediaplayer-4.2/player.swf

JW Player

User  
0 rated :

Hi there,

I needed to upload a video to my practising website. First of all, I downloaded a video from youtube to my local drive; since I needed to edit the video in windows movie maker. It generated a video with the file extension wmv. So, then I needed to convert it to swf in flash cs3 in order to be able to put it on my website. When I tested the movie in flash cs3, I could see the control bar and everything, for example I could press the buttons to start or to pause the video. However, when I published it on the website, I could not see these buttons and the control bar itself. Can someone tell me what I should do to have the control bar back? Can someone also tell me how I should place an image as the first frame (the background image of the video).
I have attached the code that I have used to give you a clue where I have gone wrong.

<object width="450" height="200">
<param name="videos/videoholiday.swf" value="videoholiday.swf" />
<param name="controller" value="true" />
<param name="autoplay" value="false" />
<embed src="videos/videoholiday.swf" width="450" height="200"
autoplay="false"
controller="true"
pluginspage="http://www.apple.com/quicktime/download/">
allowscriptaccess="always"
allowfullscreen="true"
flashvars="file=videos/holidayvideo.swf&image=images/spainholiday.jpg">
</embed>
</object>
Many thanks,

Reza

JW Player

User  
0 rated :

bc.. <embed src='index_htm_files/player.swf 'width='200' height='150' bgcolor='undefin ed' allowscriptaccess='always' allowfullscreen='true' flashvars='file=video.flv*&image=image.jpg*'/></embed>


Where *image.jpg* is a valid image file on your server.

This question has received the maximum number of answers.