Foliovision › Forums › FV Player › How to … › Making canvas background transparent
-
I am trying to play an flv with a transparent alpha channel. How do I make the canvas background transparent since the options area only allows me to enter a hex colour code? Is the following code I need to enter correct and if so where would I enter it?
wmode:’transparent’,{canvas:{backgroundColor:’transparent’,backgroundGradient:’none’}}
thx for the help… dave
-
-
Hi Dave,
right now there is no option for making the video transparent. But I am making note about this request and we will include this feature into next release.
In the meanwhile if you feel like editing source code, you can open file /wp-plugins/fv-wordpress-flowplayer/models/flowplayer-frontend.php
and the lines you want to change are 148 and 182. This change will affect all flowplayer videos on your site.Zdenka
Thanks..
Made the suggested pages but the video doesn’t play with a transparent canvas…. it uses a black gradient.
Can you view ‘http://www.vlinkwisdom.com/about/our-team/dw-test/’ and perhaps you might have an idea as to what I should next edit.
thx… dave
Hi Dave,
sorry it is not possible to remove the Flowplayer logo, it can be removed only if you buy the commercial license from Flowplayer.org. Our plugin FV WordPress Flowplayer uses the free version of Flowplayer by default.
Also the play again button is defined to show up in the flowplayer flash object, there’s no easy way how this can be removed or customized.
Zdenka
On a previous version of FV Flowplayer the logo disappeared a few seconds after it was displayed and I was also able to change the PlayAgain icon to Share.
Please see http://realestatecareertraps.com/about/keystone-partners-group-leadership-team/
Should I use version 1.06 instead of the latest version1.1
thx again… dave
Hi Dave,
the version 1.0.6 (and previous) was unbranded, but then we had to bring the branding back due to licensing issues. However, this affected mostly the full screen playback, and not the normal embedded video.
We haven’t tried transparent video with v1.0.6, but I think the problem here is with the transparency. It wouldn’t probably help if you use the previous version –
the logo is hidden in the last layer of the Flowplayer object, so when the normal video is played, it is not visible. It is visible only for few moments until the video is loaded. But now if you use the transparent video, there’s nothing that can cover the logo, hence it is visible.
You can try to experiment with v1.0.6, but I would say that this logo in the lower left corner would be there as well.
You would probably need some white patch at the place where the logo appears so that it is covered. We cannot remove it because of licensing.Zdenka
Hi Dave,
Licenses are on sale now at 20%. Current prices are $75 for single domain and $195 for 5 domains.
http://foliovision.com/player/download
Zdenka
Is the play again button the same as the play button?
Over on the Flowplayer support site they suggest you remove the play image by
onLoad: function() {
this.getPlugin(‘play’).css({opacity: 0});
}or
<script language=”javascript”>
// our custom configuration is given in third argument
flowplayer(“playerContainer”, “path/tohttp://releases.flowplayer.org/swf/flowplayer-3.2.7.swf”,{
play: null
// or play: {opacity: 0}
});
</script>any thoughts on my next step?
thx… dave
Okey dokey… I understand… thx
In http://flowplayer.org/documentation/skinning/branding.html there is an example that identifies the text for the replayLabel as “Play again”…
// default settings for the play button
play: {/*
relative path to the play button, this can be a JPG, PNG or SWF file.
NOTE: the button can only be changed in the commercial versions
*/
url: ‘play.swf’,// all display properties, except the z-index, can be modified in all versions
opacity: 0.8,// label text; by default there is no text
label: null,// label text at end of video clip
replayLabel: ‘Play again’,/*
progress indicator – this is shown while video is being loaded.
it is always in the same place as the play button.
*/
// how fast progress indicator fades out after video is loaded
fadeSpeed: 500,// how fast buffering animation rotates
rotateSpeed: 50}
Therefore… Couldn’t the opacity be set to 0.0 for this function and then the label would be invisible??
… dave
Hi Dave,
well, it sounds a bit promising, not sure if it would apply on both those buttons, but it is definitely worth a try. We haven’t been experimenting with this, as these are very specific features you like to achieve.
If you feel like trying, then try adding for example
play: {
opacity: 0
}and it should go in the same file you edited the gradient before, you will have to try the proper location, I would suggest either at the same level as is audio, or the same level as controls and clip are.
Watch for commas again, if the video doesn’t play at all you have syntax error there.Looking forward what you find out.
Zdenka
Hi Dave,
that’s great! I am really happy that I could learn something new. You were great to cooperate with, because you had real interest and tried things yourself as well.
I will think through these changes and will see if we make a transparent option available in the future. Thanks for your cooperation :)
Zdenka
Hello Riaz,
the play button should be transparent by default. Setting opacity to 0 you will hide the button probably.
If you really need to do this, than you should insert this probably on line 181 in /models/flowplayer-frontend.php between that clip part and canvas part. Please notice that inserting custom code is at your own risk, and any changes made like this will be overwritten by next plugin update. Watch for correct syntax.Zdenka
Hi Riaz,
I’m sorry, but we do not have an option or shortcode for hiding play again button, nor this can be hidden via css.
The opacity:0 might work for you, if official Flowplayer documentation says so. But you would have to edit the /models/flowplayer-frontend.php file manually to achieve this.
Zdenka