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

Viewing 28 replies - 1 through 28 (of 28 total)
  • 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

    Happy New Year Zdenka… hope you enjoyed the holidays.

    Thanks for the quick reply. In line 182 do I replace
    backgroundColor:”.trim($this->conf).”
    with
    backgroundColor:’transparent’
    and do I need to add a new line
    backgroundGradient:’none’

    Thanks for the help… dave

    Hi Dave,

    Happy New Year to you as well. Yes it should work like you write, and yes you may need to add the additional gradient line, right after the background. Don’t forget correct escaping, the above is all right, you might need to check for commas as well when adding new line.

    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,

    last thing you need to tinker around a bit is css. The background as well as the border are defined in the css: /fv-wordpress-flowplayer/css/flowplayer.css

    You will need to remove background and border from the
    .flowplayer_container class – the very first class in the file.

    Zdenka

    Fantastic… worked like a charm… you’re terrific.

    Last question… is there a way to remove the Flowplayer copyright that is displayed when I mouse over the video?
    And can I remove the playagain button?

    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

    Thanks for the details… I appreciate it.

    So what is the cost to purchase a license so that I can remove the logo branding and when I buy that license, will I be able to remove the PlayAgain button?

    thanks so much… dave

    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

    Thanks. I’ll definitely be buying.

    Where is the play again button image stored? Perhaps I can change the actual icon image or make it smaller.

    thx again… dave

    Hi Dave,

    the whole problem is that the image is not accessible, otherwise it would be very easy to replace it with let’s say 1px transparent gif. The play again button is already inside the flowplayer object, it’s compiled into the flash. That’s why we don’t have access to it.

    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

    Hi Dave,

    no, the play button is different to play again button. The play button is located in images/play.png
    You can replace this one with other image if needed.

    Zdenka

    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

    Well… we have success!!!

    Thanks for the help.. I really appreciate your interest in helping solve the problem… that’s a very positive Foliovision difference from other suppliers.

    All the best… dave

    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

    Please can you tell me where to put:

    play: {
    opacity: 0
    }

    As I would also like to make the ‘Play Again’ button transparent.

    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, sorry, I’m actually trying to hide the ‘Play Again’ button altogether. How would I do this?

    Kind Regards

    Hi, sorry, I’m actually trying to hide the ‘Play Again’ button altogether. How would I do this?

    Kind Regards

    Hi, sorry, I’m actually trying to hide the ‘Play Again’ button altogether. How would I do this?

    Kind Regards

    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

    I spoke to soon, these instructions worked perfectly, I can’t thank you enough for your time!

    Kindest Regards
    Riaz

    Hi,
    How to make the Hover / Sub Menu Background Color semi-transparent in canvas.
    I have #8f8f8f colour

    Regards [Peter

    Hello Peter,

    please start by telling us which version of FV Flowplayer plugin are you using.

    Thanks,
    Martin

Viewing 28 replies - 1 through 28 (of 28 total)
Reply To: Making canvas background transparent