DEV Community

Cover image for .NET MAUI WebViews: How to Play Videos in Full Screen

.NET MAUI WebViews: How to Play Videos in Full Screen

Victor Hugo Garcia on May 08, 2023

If you are developing a .NET MAUI app that uses WebViews to display web content, you might want to enable the full-screen video feature for your us...
Collapse
 
stefanpirkl profile image
stefanpirkl

Firstly, thanks for the excellent solution!

Have you tried this on .Net 8 Preview 5? Because what I'm seeing is, after leaving fullscreen mode:

  • on Android 10, the MAUI app doesn't fill the entire screen anymore (for example, width is only 2/3 of the available screen space)
  • on Android 13, the navigation bar stays in the middle of the screen Both can only be resolved by restarting the app.

I'm fairly certain this is a bug in MAUI, but since it's not an officially supported feature I'm afraid they won't address it.

Collapse
 
pallav_koshiya_c23657495d profile image
Pallav Koshiya

Hello, @vhugogarcia , @stefanpirkl ,

So, i found workaround for you, I don't dig into it more as its work for me.
Try nuget.org/packages/FullScreenStatu... this nuget with this handler and when you appear on webview page init fullscreen mode and restore when leaving, and magic its fill entire screen.

Collapse
 
vhugogarcia profile image
Victor Hugo Garcia

Hello @stefanpirkl ,

Thanks for your comment! I haven’t tried since .NET MAUI 8 is still on preview. From what I saw on your comment, you are using preview 5, however, the preview 6 was released 2 weeks ago, I recommend you to update it and try it again.

Also our friend Javier from the .NET MAUI team at Microsoft has been working on the implementation of this feature natively for .NET MAUI 8, you can find the Pull-Request updates here: github.com/dotnet/maui/pull/15472

So, this feature will be officially supported in .NET MAUI 8 🙂😎

Regards,
Victor

Collapse
 
stefanpirkl profile image
stefanpirkl

Hi Victor,

thanks so much for replying!

Updating to preview 6 gave me a lot of unrelated compile errors and to be honest, I'm not willing to deal with those at the moment because preview 5 is working very well otherwise.

In this particular instance, we can live with setting the navigation bar invisible and having no "real" fullscreen. Knowing it will be supported in .Net 8 is awesome news!

Kind regards,
Stefan

Collapse
 
Sloan, the sloth mascot
Comment deleted
Collapse
 
vhugogarcia profile image
Victor Hugo Garcia

You can register it by adding the following line: WebViewHandler.EnableVideoFeatures(); before return builder.Build(); inside the public static MauiApp CreateMauiApp() method.

Collapse
 
sigos_amigo_08fded21ee7ab profile image
Sigos Amigo

Thank you :)

Collapse
 
mkgungor profile image
Murat Gungor

Thanks for the post. A question for you, is there any way to fit the website in one screen, webview shows only partial view of the page, and I can not automatically change the zoom level or any other settings programmatically to show entire page.

Collapse
 
vhugogarcia profile image
Victor Hugo Garcia

Hello @mkgungor ,

Yes, you can certainly set the high and width of the webview control to the size of the screen. If the website design you are trying to load on the webview supports multiple resolutions in a responsive way, then you should be covered. Feel free to see my post: dev.to/vhugogarcia/responsive-flyo... where I explain how to make a control to adapt to the screen resolution. You can use most of the logic and apply it to a webview control.

I hope I could help :)

Regards,
Victor

Collapse
 
phantomkna profile image
Phantom_KNA

Working fine this, but I can't back to page or close this Page Container Web

Collapse
 
vhugogarcia profile image
Victor Hugo Garcia

Hello @phantomkna ,

Glad it worked OK. It is strange you cannot get back. Set a breakpoint on the method OnHideCustomView()and confirm it is being executed.

Collapse
 
phantomkna profile image
Phantom_KNA • Edited

Hi bro, everything ok, the problem is because another control when as called, thx you soo much!!

Collapse
 
aqsaaftab profile image
AQSA AFTAB

In maui webview even when setting Horizontal options FillandExpand some part of video is getting cut which include full screen option.

Collapse
 
it_sync_0a76a89b753020cd5 profile image
it sync

Hello,
I’m developing an app using MAUI .NET 8.0 for Android TV and Android phones. I need to enable full-screen mode for a website within a WebView, but my current code doesn’t seem to be working.