Hide Commercial Control Bar Skin - Preview Player Only Created Aug 6, 2010

Configure the preview player with controls: null.



HTML setup for the player

<!-- include latest Flowplayer javascript file -->
<script language="javascript" src="path/to/flowplayer-3.2.8.js"></script>

<!-- player container with optional splash image -->
<a href="path/to/video_file" id="playerContainer">
	<img src="path/to/splash_image" />
</a>

JavaScript coding

Following script will install Flowplayer into our player container

<script language="javascript">
// our custom configuration is given in third argument
flowplayer("playerContainer", "path/tohttp://releases.flowplayer.org/swf/flowplayer-3.2.11.swf",{
plugins: {
  controls: null
}
});
</script>

Having this issue again - please could you check script and advise where there could be an issue. I just need to take the controls OFF for this player only.

</script>
<?php echo $javascript->link('home/flowplayer-3.2.2.min'); ?>
<script type="text/javascript">
function play_video2(video_url,screenshot_url)
                           {
                            document.getElementById('preview').innerHTML='';           	
       						//document.getElementById('preview').innerHTML='<img src="'+screenshot_url+'">';
                           	flowplayer("preview",{src: "<?php echo SITE_PATH;?>files/flowplayer.commercial-3.2.2-2.swf", wmode: 'transparent'}, {
								key: '#$fdb91253b97e765fcd2',
								clip: {
									url: video_url,
									autoPlay: false
								}
								plugins: {
									controls: null
						
								}
							
                      		});
						}
						
</script>   

Do you actually mean for this player only, or do you mean for this specific clip only?

I'm also not sure what effect the wrapper function play_video2 has or is intended to have in your setup.

Thanks.
This player only. I have one set up on the main page. This player is for a preview player after the video has been uploaded (it is thumbnail size)so the controls are not proportionate and are distorted and take up a large portion of the thumbnail size...
I think the solution is to take the controls off for this player on this page only, right..?

Then I need a link to a sample page, because from the code you are giving (installing a unique player in 1 unique element) this should work; so the problem must be somewhere else.

go to www.flickwit.com.
login using andy8 (password is also andy8). Click the edit button and you will be taken to an /update page for the video. on the right you will see the preview thumbnail.

thanks...

Right. The flowplayer code there is:

flowplayer("preview",{src: "http://www.flickwit.com/files/flowplayer.commercial-3.2.2-2.swf", wmode: 'opaque'}, {
  key: '#$fdb91253b97e765fcd2',
  clip: {
    url: "http://flickwit.s3.amazonaws.com/734b68022d818f322387512fe6e79b14.mp4"

  }
});

Obviously no disabling of the controlbar is attempted, therefore the controlbar is visible.

okay - added the suggested script, but still not working...

No, nothing changed, the code is still the same. Are you leading me on?

This is how it should look like after you really changed it:

flowplayer("preview",{src: "http://www.flickwit.com/files/flowplayer.commercial-3.2.2-2.swf", wmode: 'opaque'}, {
  key: '#$fdb91253b97e765fcd2',
  clip: {
    url: "http://flickwit.s3.amazonaws.com/734b68022d818f322387512fe6e79b14.mp4"
  },
  plugins: {
    controls: null
  }
});

sorry... I only updated the secondary script...
I have updated both now, but the issue persists.

I do appreciate your patience and support on this issue..

Do you by any chance have the controlbar compiled in because you used the setup tool

http://flowplayer.org/setup/index.html

to configure player and controlbar? Then of course the controlbar cannot be disabled anymore.

Other things to try:



HTML setup for the player

<!-- include latest Flowplayer javascript file -->
<script language="javascript" src="path/to/flowplayer-3.2.8.js"></script>

<!-- player container with optional splash image -->
<a href="path/to/video_file" id="playerContainer">
	<img src="path/to/splash_image" />
</a>

JavaScript coding

Following script will install Flowplayer into our player container

<script language="javascript">
// our custom configuration is given in third argument
flowplayer("playerContainer", "path/tohttp://releases.flowplayer.org/swf/flowplayer-3.2.11.swf",{
plugins: {
  controls: {opacity: 0}
}
});
</script>

ha..! PERFECT...! Setting opacity to 0 did it... thanks very much...! (yes, I did manage the control bar in setup..)
Now I have my logo showing up also - is there a similar solution for this..?

Thanks again...!

Well, try the same for logo:

logo: {
  opacity: 0
}

Nope - didnt work.
Is LOGO a plugin? I'll need to do the same for tooltips...

I'll play around with it again later. Really appreciate your help today...

If you intend to tweak the player, it might be a good idea to read some documentation:

http://flowplayer.org/documentation/skinning/branding.html

The following does not display the logo:



HTML setup for the player

<!-- include latest Flowplayer javascript file -->
<script language="javascript" src="path/to/flowplayer-3.2.8.js"></script>

<!-- player container with optional splash image -->
<a href="path/to/video_file" id="playerContainer">
	<img src="path/to/splash_image" />
</a>

JavaScript coding

Following script will install Flowplayer into our player container

<script language="javascript">
// our custom configuration is given in third argument
flowplayer("playerContainer", "path/tohttp://releases.flowplayer.org/swf/flowplayer.commercial-3.2.11.swf",{
key: '#$cbc37119d21a135ca10',
logo: {
  opacity: 0
}
});
</script>

sorry, I've read a lot of the documentation and in most cases I've been successful. However, I'm not a programmer and sometimes I need support.

I'm now trying to include:

 tooltips: null 

and even tooltips with opacity, but I cannot get that to work either without getting a player error.

current script is:

                        <script>

								flowplayer("preview",{src: "<?php echo SITE_PATH;?>files/flowplayer.commercial-3.2.2-2.swf", wmode: 'opaque'}, {
								key: '#$fdb91253b97e765fcd2',
								clip: {
									url: "<?php echo $video_url;?>"
									},
								plugins: {
									controls: {opacity: 0},
									
								},
								logo: {
									opacity: 0
								}
								

                      		});
							
						</script>

if you can offer and advice, it would be appreciated.
thanks

Aside: you have a spurious comma in your config now, thanks to the highlighting it is marked red.

http://flowplayer.org/plugins/flash/controlbar.html#tooltips

says that tooltips is a "sub-object" of the controls configuration object. Try this then:



HTML setup for the player

<!-- include latest Flowplayer javascript file -->
<script language="javascript" src="path/to/flowplayer-3.2.8.js"></script>

<!-- player container with optional splash image -->
<a href="path/to/video_file" id="playerContainer">
	<img src="path/to/splash_image" />
</a>

JavaScript coding

Following script will install Flowplayer into our player container

<script language="javascript">
// our custom configuration is given in third argument
flowplayer("playerContainer", "path/tohttp://releases.flowplayer.org/swf/flowplayer-3.2.11.swf",{
plugins: {
  controls: {
    opacity: 0,
    tooltips: null
  }
}
});
</script>

If setting tooltips globally to null does not have an effect, you probably have to set each tooltip that is enabled by default to null. Again there's an example in the documentation.
You might also consider a non-custom compiled player, and configure it for each use case, as the static configuration only gets in your way.