Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Opacity of player and Video with Alpha #332

Open
Sash0check opened this issue Aug 9, 2023 · 6 comments
Open

Opacity of player and Video with Alpha #332

Sash0check opened this issue Aug 9, 2023 · 6 comments
Labels
enhancement New feature or request

Comments

@Sash0check
Copy link

Sash0check commented Aug 9, 2023

Hello! I can't cahnge opacity of player element in WPF. It works on child elements but video not. And second question: my transparent video in dxv format showing with black background can i fix this? Thanks

@Sash0check Sash0check changed the title Opacity of player Opacity of player and Video with Alpha Aug 9, 2023
@SuRGeoNix
Copy link
Owner

Hi @Sash0check, currently flyleaf does not support transparency.

@SuRGeoNix SuRGeoNix added the enhancement New feature or request label Aug 17, 2023
@signumnova
Copy link
Contributor

I have started experimenting with this, since I want to make the entire video semi transparent with something else sitting behind it, and that isn't possible currently either. It involves tinkering with things deep down in the rendering level though, including (probably) setting up a BlendState on the DirectX device context.

@SuRGeoNix
Copy link
Owner

I think I've done it in the past, by settings the color.a to transparent in the pixel shader https://github.com/SuRGeoNix/Flyleaf/blob/master/FlyleafLib/MediaFramework/MediaRenderer/ShaderCompiler.cs#L367
and using the composition swap chain. I will need to review it and might added in the future.

@signumnova
Copy link
Contributor

signumnova commented Oct 11, 2023

In terms of making the video play with an overall opacity of <100% this turned out to be quite simple in the end, and did not involve changing the pixel shader or renderer code. All it needed was two things inside FlyleafHost:

  1. Surface.AllowsTransparency=true regardless of whether rounded corners being used.
  2. A new call to SetLayeredWindowAttributes(SurfaceHandle, 0, opacity, 2) immediately after adding the "Layered" style to the surface. (Opacity = 0..255)

The app level window that holds the FlyleafHost also needs to have Transparency enabled and Opacity=0 to get a fully translucent effect to desktop level.

Turning this from a PoC to a feature should make it possible to achieve fade-up/fade-down and cross-fade effects between overlapping players.

I don't know yet if the same thing will work with the WinFormsHost, that may still be subject to the classic WPF/WinForms airspace issue.

One thing it doesn't quite do is allow for the non-active portion of the player window to be totally transparent, as in when the video aspect doesn't fit the window shape. (Even though you can specify an alpha in the Player.Config.Video.BackgroundColour the renderer does not currently honour this, it just comes out solid but is subject to the alpha of the Surface behind it in the same way that the video itself is handled). As for videos that themselves contain an alpha channel, this doesn't currently work either for the same reason - may just need a bit more work on the pixel shader to handle the alpha plane.

@LazyCuteLion
Copy link
Contributor

LazyCuteLion commented Jul 31, 2024

@SuRGeoNix this commit[1b3f7a9] work with [Config.Video.BackgroundColor],but hope to set Transparent and mix with the host window background.i try to do everything(baidu、bing 、stackoverflow……),but come to nothing.
however,can add "SoftwareHost"? like [ffmediaelement.ImageHost],it use “WriteableBitmap” for rendering.It works well with videos that have transparent channel.
as a developer,you know,the designer,they are so stupid and think we create animation so easy.but sadly,most scene can not do as like as two peas.we have to got some shortcut.use the mov is the way.now i use ffmediaelement,but i find your project ,liked immediately when tried it.

@LazyCuteLion
Copy link
Contributor

oh,i got a way! #492

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

No branches or pull requests

4 participants