• Skip to content
  • Skip to primary sidebar
  • Skip to footer

Foliovision

Making the web work for you

Main navigation

  • Weblog
    • FV Player
    • WordPress
    • Video of the Week
    • Case Studies
    • Business
  • About
    • Testimonials
    • Meet the Team
    • We Support
    • Careers
    • Contact
    • Pricing
  • Products
  • Support
    • FV Player Docs
    • Pro Support
  • Login
  • Basket is empty

Making canvas background transparent

[Solved]

Foliovision › Forums › FV Player › How to … › Making canvas background transparent

  • Dave Williams 11 years, 2 months ago

    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)
  • zdenka 11 years ago

    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

    Dave Williams 11 years ago

    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

    zdenka 11 years ago

    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

    Dave Williams 11 years ago

    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

    zdenka 11 years ago

    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

    Dave Williams 11 years ago

    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

    zdenka 11 years ago

    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

    Dave Williams 11 years ago

    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

    zdenka 11 years ago

    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

    Dave Williams 11 years ago

    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

    zdenka 11 years ago

    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

    Dave Williams 11 years ago

    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

    zdenka 11 years ago

    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

    Dave Williams 11 years ago

    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

    zdenka 11 years ago

    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

    Dave Williams 11 years ago

    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

    zdenka 11 years ago

    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

    Dave Williams 11 years ago

    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

    zdenka 11 years ago

    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

    Riaz Farooq 11 years ago

    Please can you tell me where to put:

    play: {
    opacity: 0
    }

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

    zdenka 11 years ago

    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

    Riaz Farooq 11 years ago

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

    Kind Regards

    Riaz Farooq 11 years ago

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

    Kind Regards

    Riaz Farooq 11 years ago

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

    Kind Regards

    zdenka 11 years ago

    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

    Riaz Farooq 11 years ago

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

    Kindest Regards
    Riaz

    peter 9 years ago

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

    Regards [Peter

    Martin 9 years ago

    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



Please Sign in or Register to upload files.

Related Posts

  1. Google Video Advertising Options

  2. Making a Good Headline Better

    Making a Good Headline Better

  3. Thanksgiving: Making a Better World

    Thanksgiving: Making a Better World

Primary Sidebar

Sign in Register
FV Player Docs Post New Topic

Welcome

to Foliovision support forums! We'll be happy to provide free support to resolve all the reported bugs. You always can start by specifying your OS and browser and steps to reproduce the bug.

If you need help with the installation on your site, please submit a request for a Pro Support Incident. We'll have you up and running in no time, with detailed instructions on how to resolve your issue yourself in the future.

Facing a hard to solve WordPress problem? On a tight deadline?

Let us take care of it for you
right now.

Pro Support Buy FV Player

Footer

Our Plugins

  • FV WordPress Flowplayer
  • FV Thoughtful Comments
  • FV Simpler SEO
  • FV Antispam
  • FV Gravatar Cache
  • FV Testimonials

Free Tools

  • Pandoc Online
  • Article spinner
  • WordPress Password Finder
  • Delete LinkedIn Account
  • Responsive Design Calculator
Foliovision logo
All materials © 2023 Foliovision s.r.o. | Panská 12 - 81101 Bratislava - Slovakia | info@foliovision.com
  • This Site Uses Cookies
  • Privacy Policy
  • Terms of Service
  • Site Map
  • Contact
  • Tel. ‭+421 2/5292 0086‬

We are using cookies to give you the best experience on our website.

You can find out more about which cookies we are using or switch them off in settings.

Powered by  GDPR Cookie Compliance
Privacy Overview

This website uses cookies so that we can provide you with the best user experience possible. Cookie information is stored in your browser and performs functions such as recognising you when you return to our website and helping our team to understand which sections of the website you find most interesting and useful.

Necessary Cookies

Strictly Necessary Cookie allow you to log in and download your software or post to forums.

We use the WordPress login cookie and the session cookie.

If you disable this cookie, we will not be able to save your preferences. This means that every time you visit this website you will need to enable or disable cookies again.

Support Cookies

Foliovision.com uses self-hosted Rocket.chat and self-hosted Freescout support desk to provide support for FV Player users. These cookies allow our visitors to chat with us and/or submit support tickets.

We are delighted to recommend self-hosted Rocket.chat and especially Freescout to other privacy-conscious independent publishers who would prefer to self-host support.

Please enable Strictly Necessary Cookies first so that we can save your preferences!

3rd Party Cookies

This website uses Google Analytics and Statcounter to collect anonymous information such as the number of visitors to the site, and the most popular pages.

Keeping this cookie enabled helps us to improve our website.

We reluctantly use Google Analytics as it helps us to test FV Player against popular Google Analytics features. Feel free to turn off these cookies if they make you feel uncomfortable.

Statcounter is an independent Irish stats service which we have been using since the beginning of recorded time, sixteen years ago.

Please enable Strictly Necessary Cookies first so that we can save your preferences!