Posts tagged ‘flash’

Webdesign: show content on top of Flash or Silverlight component

I started playing with JQuery last week and used the Boxy plugin to display a dialog window to the user while disabling all other components. In the background it uses CSS’s z-index property to accomplish this. At least.. almost all components, because as you can see in the video below the flash movie kept appearing on top of the Boxy window. In a later test I noticed the same thing happens for Silverlight components.

problem

Here is how to fix it:

Flash

Flash has a “wmode” parameter which you have to set to “opaque” for the z-index style to have an effect. For instance for the Flash JWPlayer:

<script type='text/javascript'> 

	var s1 = new SWFObject('player.swf','IFIPPlayer','400','300','9');

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

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

	s1.addParam('flashvars','type=video&file=movie.flv');

	s1.addParam('wmode','opaque');

	s1.write('theplayer');

</script> 

Silverlight

Silverlight has a “windowsless” property which you have to set to ‘true’ for the z-index style to have an effect. For instance for the Silverlight JWPlayer:

<script type=”text/javascript”>
var cnt = document.getElementById(“player_http://ifip.test.ibbt.be/fedora/get/<%=@item.id%>/MAM_lowres”);
var src = ‘<%=ActionController::Base.relative_url_root%>/wmvplayer.xaml’;
var cfg = {
height:'<%=defined?(@flashplayer_height) ? @flashplayer_height : 300%>’,
width:'<%=defined?(@flashplayer_width) ? @flashplayer_width : 400%>’,
windowless:’true’
};
var ply = new jeroenwijering.Player(cnt,src,cfg);
</script>
<script type="text/javascript"> 

	var cnt = document.getElementById("theplayer");

	var src = '/wmvplayer.xaml';

	var cfg = {

		file:'movie.wmv',

		image:'thumb.jpg',

		height:'300',

		width:'400',

		windowless:'true'

	};

	var ply = new jeroenwijering.Player(cnt,src,cfg);	

</script> 

And a screenshot to prove it 🙂

solved

October 6, 2009 at 11:18 am Leave a comment

flash 10 on Ubuntu amd_64

230  sudo apt-get remove flashplugin-nonfree flashplugin-installer
233  tar xvf libflashplayer-10.0.32.18.linux-x86_64.so.tar.gz
234  sudo mv libflashplayer.so /usr/lib/mozilla/plugins/
Flashplayer 10 is not yet supported by Adobe for amd_64 Linux architectures, but they do have an alpha relase in their labs: http://labs.adobe.com/downloads/flashplayer10.html. Here’s how to install it (Thanks to these guys, only the download url has changed. ).
sudo apt-get remove flashplugin-nonfree flashplugin-installer
wget http://download.macromedia.com/pub/labs/flashplayer10/libflashplayer-10.0.32.18.linux-x86_64.so.tar.gz
tar xvf libflashplayer-10.0.32.18.linux-x86_64.so.tar.gz 
sudo mv libflashplayer.so /usr/lib/mozilla/plugins/

October 2, 2009 at 4:59 pm Leave a comment


Feeds

Articles to be written…

Twitter – kr3l

my del.icio.us

RSS Google Reader Shared Stuff

  • An error has occurred; the feed is probably down. Try again later.

RSS Listening to..

  • An error has occurred; the feed is probably down. Try again later.