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

Forums

/

margin/padding around control bar

19 replies [Last post]

Is there a way to set padding or margin between the controlbar and video portion? Currently the video runs right up to the control bar, we'd like some padding or margin in there.

If you set the controlbar position to over it will be moved up and in slightly.

I was looking for a way to specify the padding between the control bar and video -- it doesn't look like it is possible with the default control bar.

A work around seems to be to use the Javascript control bar option, but the tutorial is lacking -- are there any further examples?

See related thread for other developers with the same issue - http://www.longtailvideo.com/support/forum/JavaScript-Interaction/19611/JavaScript-controlbar-help

thanks

Ahh okay, I understand.

http://www.longtailvideo.com/support/tutorials/JS-Controlbar is the only example that we have.

Other than that, the only other way to change the position of the default controlbar would be to modify it in the Flash source code.

The example given for the JS control bar doesn't show how to tie the JS control bar to a JW player instance. Linked by player name? id? css value?

Have you tried to set it up based on the tutorial? Do you have a link?

You should be able to link the JS controlbar to multiple JW Players on a page by default.

I have tried setting it up based on the tutorial. The first step is to replicate exactly what the tutorial has -- I was unable to do this.

The tutorial only has 2 snippets of code to cut and paste, neither of which show how to link the javascript control bar to the player. From reading the tutorial I have a difficult time seeing how the example works.

Can you provide a link?

Here is a link -- i'm not exactly sure what to put on the page, I merely cut and pasted from the tutorial.

http://latimes-dev.library.ucla.edu/test_jw_player.html

Hi,

Your issue is that you are using swfobject 2.1 - <script type="text/javascript" src="/js/swfobject-2.1.js"></script>

But the code you are using is in the format of swfoject 1.5

Use this version - http://player.longtailvideo.com/swfobject.js

And it should work.

Best
-Ethan

I have updated the page, but still get some errors. Do you have a full example page I can cut and paste for the JS control bar example?

Thanks for your help on this matter

http://www.longtailvideo.com/support/tutorials/JS-Controlbar is the only example that we have.

You need to make sure that you have all of these in there:

<link type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="http://www.longtailvideo.com/jw/css/jscontrolbar.css" />
<script type="text/javascript" src="http://www.longtailvideo.com/jw/js/jquery.jscontrolbar.js"></script>
<script type="text/javascript" src="http://www.longtailvideo.com/jw/js/ui.core.js"></script>
<script type="text/javascript" src="http://www.longtailvideo.com/jw/js/ui.slider.js"></scrip

Your code is not looking for the ui class but it can't be found, so you are missing one of the required files.

I've cut and pasted exactly what is listed above and still get errors in IE8, in FF 3.5.7 the slider shows up but no jwplayer

http://latimes-dev.library.ucla.edu/test_jw_player.html

Move <div id="player1" align="center"></div>

Above your script tag.

Still not having any luck. I moved the script tag.

I figured it out, you are missing the opening and closing <body> and </body> tags on your page.

Use this code and it will work.

<!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>

<script type="text/javascript" src="http://latimes-dev.library.ucla.edu/js/jquery-1.3.2.js" ></script>
<script type="text/javascript" src="http://player.longtailvideo.com/swfobject.js"></script>

<link type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="http://www.longtailvideo.com/jw/css/jscontrolbar.css" />
<script type="text/javascript" src="http://www.longtailvideo.com/jw/js/jquery.jscontrolbar.js"></script>
<script type="text/javascript" src="http://www.longtailvideo.com/jw/js/ui.core.js"></script>

<script type="text/javascript" src="http://www.longtailvideo.com/jw/js/ui.slider.js"></script>
</head>

<body>
<div id="player1" align="center"></div>

<script type="text/javascript">
  var so = new SWFObject('http://player.longtailvideo.com/player.swf','ply1','320','240','9');
  so.addParam('allowfullscreen','true');
  so.addParam('allowscriptaccess','always');
  so.addParam('flashvars','file=http://content.longtailvideo.com/videos/flvplayer.flv&image=http://content.longtailvideo.com/videos/flvplayer.jpg&controlbar=none');
  so.write('player1');
</script>

<div class="jw_controlbar">
<div class="jw_controlbar play"></div>
<div class="jw_controlbar pause"></div>
<div class="jw_controlbar stop"></div>
<div class="jw_controlbar currenttime">00:00</div>
<div class="jw_controlbar scrubber ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all">
<div class="ui-slider-range ui-slider-range-min ui-widget-header"/>
<a href="#" class="ui-slider-handle ui-state-default ui-corner-all"/>
</div>
<div class="jw_controlbar totaltime">00:00</div>
<div class="jw_controlbar fullscreen"></div>
<div class="jw_controlbar mute"></div>
<div class="jw_controlbar unmute"></div>
<div class="jw_controlbar volume ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all">
<div class="ui-slider-range ui-slider-range-min ui-widget-header" />
<a href="#" class="ui-slider-handle ui-state-default ui-corner-all"/>
</div>
</div>

</body>
</html>

Thank you, the code above does work.

NP :)

I am unable to get jscontrolbar to work with my web page so I thought I would try the above code.

All I get in addition to the player is:-

00:00
00:00

I can sent a screen shot if I had an email address. This is very similar to what I get with my own web page.

Can you help, please?

Tony

It seems to depend on which browser/OS I am using.

Ubuntu + FF3.018 shows the pretty girl but not the Control Bar.

WinXP + FF3.5.8 show girl and CB.
WinXP + IE 7.0.5730.13 show neither.

Tony