You will recieve your password to this address. Address is not made public.

Your preferred username that is used when logging in.

Transparent Player Created Jul 7, 2009

This thread is solved

Views: 11972     Replies: 32     Last reply Nov 12, 2011  
You must login first before you can use this feature

Tomson

Posts: 11

Registered:
Jun 28, 2009

Transparent Player

Posted: Jul 7, 2009

Hey,

I would like to know if its possible to turn the FlowPlayer into a transparent player? Same in the following link:

Some people think this url is evil so think twice before using it: tinyurl.com/q46tx3

Thanks,
Tom

Buzz
Author of 'Wordpress Flowplayer', jQuery.saiweb http://saiweb.co.uk Problems, requests? Please log a ticket at: http://trac.saiweb.co.uk

Posts: 271

Registered:
Dec 17, 2008

» Transparent Player

Posted: Jul 7, 2009

Reply to: Transparent Player, from Tomson
I made the mistake of clicking that link.

I advise others that view this thread not too ...

I apologize if this is a genuine question but this appears to be nothing but SPAM attempting to steal business to an alternate, and frankly awe full product.

Tomson

Posts: 11

Registered:
Jun 28, 2009

Transparent Player

Posted: Jul 7, 2009

Reply to: » Transparent Player, from DBusby
DBusby,

This is my first time to this forum.
I apologize if its look like a spam - Its really not.
I truly want to know if there is a way to make the FlowPlayer transparent. Looking for another solution for my website to combine the FlowPlayer.

Tom

gmccomb

Posts: 746

Registered:
Apr 9, 2009

» Transparent Player

Posted: Jul 7, 2009

Reply to: Transparent Player, from Tomson
Edit your post to remove the cloaked URL. Otherwise I believe your message should be deleted.

Explain what you mean by "transparent." If you mean make the controls less opaque do some research in the Documentation area for how to change the colors and opacity of just about any Flowplayer element.

Tomson

Posts: 11

Registered:
Jun 28, 2009

Edit my post?

Posted: Jul 7, 2009

Reply to: » Transparent Player, from gmccomb
gmccomb: Can you please tell how to edit my post?

My goal is to have a transparent player - without the frame around it(without the skin). Buttons that will appear when I mouseover, just like in the link I sent. All the rest will be controlled with javascript.
www.transparentplayer.com (direct link in case you will think its a spam)

Thanks for helping,
Tom

mendrel

Posts: 12

Registered:
Jul 8, 2009

I"m looking for the same thing

Posted: Jul 8, 2009

Reply to: Edit my post?, from Tomson
Tomson isn't spamming. What he's looking for is the ability to play a video with an alpha channel so that the entire video background is transparent allowing any underlying content to show through. For example, when a person walks out from the side of the screen over the content and can provide help, or whatever.

It should be possible since Flash supports transparent backgrounds for video since Flash 8 (I think) and Flowplayer can also utilize the wmode:transparent tag. However, I have an issue where if I add the "wmode:transparent" to the flowplayer() call, the video no longer works. I have a test video that should be correctly setup for this effect. If I can get a demo to work I'll post here how it works but no luck so far.

Tomson

Posts: 11

Registered:
Jun 28, 2009

Thanks Mendrel - transparent video

Posted: Jul 8, 2009

Reply to: I"m looking for the same thing, from mendrel
Thanks Mendrel for better explaining what we both looking for. I will try as well playing with the wmode option.
Eventually I'm sure there is a way with the FlowPlayer to get this done.

Will update,
Tomson

gmccomb

Posts: 746

Registered:
Apr 9, 2009

» Edit my post?

Posted: Jul 8, 2009

Reply to: Edit my post?, from Tomson
On the "spam" charge, I'm not so much concerned with that as with the cloaked URL. It's just a bad idea to have cloaked URLs that people may click on, and end up on an exploit site.

What I saw was less a "transparent" player but just a chromeless player; that is, a player without a control bar, or a minimal control bar. (That plus some really kludgy JavaScript that IMO makes the player and the page easy to click away from and never visit again!)

There are some examples of a controller-less player in the Documentation area. You can set up Flowplayer to autoplay, and without a visible controller.

Flowplayer doesn't come with a small controller option, so if you want a small controlbar to appear anything you do there will have to be invented by you. It *can* be done with JavaScript, and there is an example in the Documentation on how to do it, but it's not for beginners.

@mendrel, Wasn't aware setting wmode to transparent made the video to no longer appear. If this is a real bug be sure to post it in the Bugs forum for the Flowplayer developers.

I've not played with alpha channels, but I see no reason Flowplayer would not support it through. Would be happy to review your proof-of-concept page when you get it ready, or even if it doesn't work in case it's a scripting error and not a bug in Flowplayer.

mendrel

Posts: 12

Registered:
Jul 8, 2009

» » Edit my post?

Posted: Jul 9, 2009

Reply to: » Edit my post?, from gmccomb
gmccomb: No worries. I don't like url shorteners either. Attacks using cloaked URLs are on the rise. I don't click on them for that reason. The transparent player really isn't that good. Not that I speak from experience/use, but I noticed the same things you did. It's that reason that I'm here (and Tomson it seems) trying to replicate the effect.

I don't mind rolling my own controls as needed, my current hangup now is the use of the transparent background within Flowplayer, but I need to make sure that the video I'm using is correct. If you have a video (I'm still waiting for the in-house videographer <sigh> to get around to getting me some simple demo footage) I'd like to use video that you know should work to test my setup. I'm trying to make sure that it's my setup, not Flowplayer before I submit a bug for the issue.

SUMMARY

gmccomb: If you have a test video I'd be happy to use it and I welcome your review once I get a small POC/demo done.

Tomson: If I get the demo working and the mini-controls set I'd be happy to share with you (and the community)...though a case of beer wouldn't hurt ;)

gmccomb

Posts: 746

Registered:
Apr 9, 2009

» » » Edit my post?

Posted: Jul 9, 2009

Reply to: » » Edit my post?, from mendrel
I came across a clip a few months ago for an adult site (though no sex or nudity) and wanted to snag it, but forgot to, and now I can't find the URL!

Creating quality greenscreen vids is a pain, though I've done it in the past outdoors with standard green photographic background paper on an overcast day (don't have a suitable indoor studio).

Don't forget that you need to a converter other than ffmpeg or its ilk to create a playable file with an alpha channel, as I don't think ffmpeg is yet able to do that. The VP6 converter will do it, and I think the encoder that comes with the Flash app has a setting for it as well.

If you have the Ant toolbar or some other utility for stealing YouTube videos you can do a search for "green screen" there and download any number of examples for experimenting. Of course such stealing is purely for educational purposes!

On a bug in Flowplayer: FLV players don't have to do anything to support transparent windowing mode. If wmode: 'transparent' isn't working then there might be an issue with the .js file not properly passing this to Flash. You can always try with a direct OBJECT embed, where you set wmode via a param, just as you would any Flash parameter, such as allowscriptaccess.

In fact, I'm not aware that any Flash application can control or otherwise influence any of the Flash windowing modes.

Tomson

Posts: 11

Registered:
Jun 28, 2009

Green Screen Sample

Posted: Jul 9, 2009

Reply to: » » » Edit my post?, from gmccomb
I have plenty of green screen samples.
Currently uploading one and will send you the links when its online.

gmccomb: from the documentation I understood that I can compile my own buttons. The one thing that I didn't see or find it yet - is to make the video content transparent - meaning using the wmode=transparent.
I did see it working with a PNG option not with a flv file.

still uploading the sample....

Thanks,
Tom

gmccomb

Posts: 746

Registered:
Apr 9, 2009

» Green Screen Sample

Posted: Jul 9, 2009

Reply to: Green Screen Sample, from Tomson
>is to make the video content transparent -
>meaning using the wmode=transparent.

wmode is a Flash setting that affects ANY type content, whether it's a PNG or a SWF or an FLV, that has an alpha channel. If your FLV is encoded with an alpha channel it should work. There are only a few encoders that will do alpha. Unless they recently added it, ffmpeg, or any of the bazillion converters that use it, will not work.

dynamitemedia

Posts: 18

Registered:
Jun 22, 2009

» » Green Screen Sample

Posted: Jul 9, 2009

Reply to: » Green Screen Sample, from gmccomb
so my question is this what color can be used as transparent?

you know in flash if its white it will be transparent can that be done here as a green screen effect and adding a png or swf on the canvas?or just the regular page using wmode?

or does this need to be encoded as alpha?

i see in the exampe here:

http://flowplayer.org/demos/skinning/canvas-swf.html

the black actually looks transparent, has anyone tried this?

gmccomb

Posts: 746

Registered:
Apr 9, 2009

» » » Green Screen Sample

Posted: Jul 9, 2009

Reply to: » » Green Screen Sample, from dynamitemedia
You need to encode the video with an alpha channel. It's the alpha channel, as well as the appropriate wmode setting, that creates the transparency. I know the Flash 8 encoder only has a checkbox for this, and no setting for the specific color (so I guess it's limited to the standard green, but I don't know as I've never gotten it to work!), but On2 Flix lets you pick the color, from what I understand.

If I have some extra time this weekend I might snag a green screen AVI example and try Flash 8 encoder again. Usually all I ever get is a completely transparent video. Not too useful!

dynamitemedia

Posts: 18

Registered:
Jun 22, 2009

» » » » Green Screen Sample

Posted: Jul 9, 2009

Reply to: » » » Green Screen Sample, from gmccomb
I just wish you could do it on the fly with a webcam and live does flash media enocoder offer that? hmm gonna have to check into that.

i have tried using manycam etc but you get some cheesy looks....

Hey thanks for responding its like second post i ever gotten any response to!! whoohoo

was just about to give up, tho well documented theres always something you can learn. JS isnt my thing, got a good wrap on php so they work a bit together so thats good

Tomson

Posts: 11

Registered:
Jun 28, 2009

Green Screen Sample

Posted: Jul 9, 2009

Reply to: » » » Green Screen Sample, from gmccomb
Here is a green screen sample that you can play with:
http://rapidshare.com/files/253608696/greenscreen_clip.avi.html

For keying I'm using: Ultra CS3
or a new tool that I just discovered(free):
http://www.cinegobs.com/

For encoding I'm using: Flash Encoder from Adobe (Macromedia)

gmccomb

Posts: 746

Registered:
Apr 9, 2009

» Green Screen Sample

Posted: Jul 9, 2009

Reply to: Green Screen Sample, from Tomson
Thanks. Let me know if you work up a keyed FLV of the AVI. Either got no result or a completely black image when keyed and then encoded in Flash 8 encoder.

Tomson

Posts: 11

Registered:
Jun 28, 2009

Green Screen Sample

Posted: Jul 9, 2009

Reply to: » Green Screen Sample, from gmccomb
I will upload as well a keyed flv that you will be able to play with.

gmccomb

Posts: 746

Registered:
Apr 9, 2009

» Green Screen Sample

Posted: Jul 9, 2009

Reply to: Green Screen Sample, from Tomson
Finally got one to work. Was a problem with the AVI compressors I selected. The keying is really crude as I didn't take much time fine-tuning it, but it's enough to work from.

I did a quick test with a baseline player of my own and the transparency works as expected, and I also did a quick local test in Flowplayer and it also works, as I expected. This is with Flowplayer 3.1.1.

I will post sample pages later today demonstrating keying and wmode: transparent in Flowplayer.

gmccomb

Posts: 746

Registered:
Apr 9, 2009

» Transparent Player

Posted: Jul 9, 2009

Reply to: Transparent Player, from Tomson
It's close but not 100% there. I'll let others with more interest experiment, but it looks like there's also a canvas gradient (or something) that needs to be turned off. It's apparent when you use a color for the page.

And there's an odd border flashing in some versions of Firefox when the player has focus, but it doesn't occur in my test player, so it may have to do with something else Flowplayer is doing internally.

http://www.buenacreek.com/flowplayertest/transparent.html

Tomson

Posts: 11

Registered:
Jun 28, 2009

Keyed flv sample

Posted: Jul 10, 2009

Reply to: » Transparent Player, from gmccomb
Here is a keyed flv:
http://rapidshare.com/files/254070704/Daniel25B.flv.html

I will try it too.

mendrel

Posts: 12

Registered:
Jul 8, 2009

Wow!

Posted: Jul 10, 2009

Reply to: Keyed flv sample, from Tomson
Wow you guys work fast! I come back and here people have already generated and tested videos.

Since it looks as though the background can be transparent it's just a matter of aligning the video background (transparent via alpha channel and encoded correctly) and the Flash background (wmode transparent, background gradient off?).

Next step is working on the mini controls that show on mouseover. I'll see what I can come up with in the next few days unless someone beats me to it.

gmccomb

Posts: 746

Registered:
Apr 9, 2009

» Wow!

Posted: Jul 10, 2009

Reply to: Wow!, from mendrel
Would be nice if you develop and share (not necessarily for free; that's up to you) a "mini controls" controls.swf for Flowplayer. Could be a nice addition lots of people could use. My plate is full right now or I'd consider it, but I think it would have wide appeal.

I'm not too happy about the background border Firefox adds to Flash when in wmode:transparent mode, but that's how that browser works. With JavaScript you could probably change focus to something else on your page, and then the border will not show. It only shows when the Flash window has focus, and is an accessibility thing.

There are Flowplayter canvas properties for setting opacity and gradient, and I'm sure one or both will take care of dropping out the background completely.

FWIW, I used the cinegobs keyer Tomson mentioned, and it's not bad, though an all-in-one app like On2 Flix is probably easier. However, Flix costs $250...

In the end, how many "ordinary" Web masters create these kinds of videos? I mean, greenscreening isn't the easiest thing in the world to get right. Or maybe I should clear out the crap in my garage, turn it into a studio, and charge $100 an hour for people to come in and shoot their "walk on" Web videos for use with Flowplayer!

Hmmm.... :-)

mendrel

Posts: 12

Registered:
Jul 8, 2009

Specialty effects

Posted: Jul 10, 2009

Reply to: » Wow!, from gmccomb
Thanks for the test videos! There's a slight haze in the 'transparent' background. But I don't think I've got the gradient hidden/removed yet.

Yes, this is a rather niche effect due to the production costs of a 'transparent' video. But no fair stealing the greenscreen studio idea I've got ;)

I am considering releasing the mini-controls if I get some that are decent. If I do, I'd welcome any feedback/improvements from the community.

Tomson

Posts: 11

Registered:
Jun 28, 2009

Wow2

Posted: Jul 10, 2009

Reply to: » Wow!, from gmccomb
About the border - there is a trick to remove it with javascript - will need to ask my friend who is a better programmer then me.
The next goal as you say is to compile other buttons or actually use the same big play button only without the bar on the bottom.

@gmccomb: If you would be interested it very easy to do green screen once you have the right lighting.
Fluorescents lighting + Electric Ballasters + stands + green screen sheet = great keying.

mendrel

Posts: 12

Registered:
Jul 8, 2009

New Controls...

Posted: Jul 10, 2009

Reply to: Wow2, from Tomson
Looks like I need to get a version of Flash to mess with the controls. As soon as it gets here, or if I can find a friend, or maybe I'll freelance it out... I'll post the work on it here if something develops.

gmccomb

Posts: 746

Registered:
Apr 9, 2009

» Wow2

Posted: Jul 10, 2009

Reply to: Wow2, from Tomson
The problem I have is getting the depth needed for a full body shot for anything walk-around. That's why I've done it outdoors, but on heavily overcast days so there are no shadows. The garage is way too full for anything but a head shot!

If/when my (adult age) kids ever move out of the house I'll have space in the family room, and it's large enough that I can do full body shots, and then some. However, they never seem to want to leave... (Think it's more of a money thing than a love thing, but whatareyougunnado?)

@mendrel, If it turns out the gradient can't be fully removed (though I'd be surprised) be sure to post a note directly to Anssi, who is the Flowplayer developer. I'm sure he'd be willing to add a fully-transparent option so that Flowplayer could be used for these types of vids.

For the border I understand this *may* work:


object { outline:none; }

where object is the name of the Flash embedded-in object. Worth a shot.

@Tomson, It's pretty easy to hide the controller. Flowplayer supports a fully "chromeless" look, if you wish. You can also substitute the Big Play button with anything, or remove for a fully controller-less video. I'm not fond of such videos, and like to at least have a mute and/or volume control. Fortunately those could be done in JavaScript and HTML only. Don't need a compiled Flash controlbar for that.

gmccomb

Posts: 746

Registered:
Apr 9, 2009

» » Wow2

Posted: Jul 11, 2009

Reply to: » Wow2, from gmccomb
Just a note: This *does* work to remove the border in Firefox when wmode=transparent:


<style type="text/css" media="screen">
   object { outline:none; }
</style>

Of course you can simply put the object selector in your CSS file or existing style definition in your page.

Anssi
Flowplayer Flash & video streaming developer

Posts: 1194

Registered:
Jul 24, 2007

» » Transparent Player

Posted: Jul 14, 2009

Reply to: » Transparent Player, from gmccomb
The canvas gradient can be removed like this:


canvas: {
   backgroundGradient: 'none'
}

Anssi

jimtheslim

Posts: 1

Registered:
Jul 16, 2011

» » » Transparent Player

Posted: Jul 16, 2011

Reply to: » » Transparent Player, from Anssi
for me this is not work i run local in Google Chrome
trying to implement at http://www.fastemailsender.com

Any suggestion ? Thanks