.NET MAUI WebViews:如何在全屏上播放视频
#dotnet #android #dotnetmaui

如果您正在开发一个使用WebViews显示Web内容的.NET MAUI应用程序,则可能需要为用户启用全屏视频功能。此功能使用户可以在 Android 中以全屏模式观看视频,而无需离开网络浏览或打开新活动。在这篇文章中,我将向您展示如何使用一个简单的自定义处理程序和一些本机代码在.NET MAUI WebViews中启用此功能。让我开始!


ios

好消息,在iOS上,由于Apple的移动平台已经提供了全屏功能,因此没有其他更改要做。

安卓

对于Android,我们需要覆盖Web Cromeclient,以便我们在WebView中启用全屏视频功能。

创建新的Web Chrome客户端

  • 创建一个带有以下名称的文件:WebPlayerChromeClient.cs,然后在/Platforms/Android文件夹下添加它
  • 添加以下代码,请查看代码注释以获取更多详细信息
using Android.App;
using Android.Content.Res;
using Android.OS;
using Android.Views;
using Android.Webkit;
using Android.Widget;
using Microsoft.Maui.Handlers;
using Microsoft.Maui.Platform;

namespace DemoApp.Platforms
{
    public class WebPlayerChromeClient : MauiWebChromeClient
    {
        private readonly Activity context;
        private int originalUiOptions;
        private Android.Views.View customView;
        private ICustomViewCallback videoViewCallback;

        public WebPlayerChromeClient(IWebViewHandler handler) : base(handler)
        {
            this.context = Microsoft.Maui.ApplicationModel.Platform.CurrentActivity;
        }

        public override void OnHideCustomView()
        {
            if (context != null)
            {
                if (context.Window.DecorView is FrameLayout layout)
                    layout.RemoveView(customView);

                // It may happen that your app is compatible with Tablet in landscape-only. 
                // So, use the helper method to validate it. 
                // Only return to original position if it is a phone
                // Remove this validation if your app does not require it.
                if (!IsTablet(context))
                    context.RequestedOrientation = Android.Content.PM.ScreenOrientation.Portrait;

                // Show again the SystemBars and Status bar
                if (Build.VERSION.SdkInt >= Android.OS.BuildVersionCodes.R)
                {
                    context.Window.SetDecorFitsSystemWindows(true);
                    context.Window.InsetsController?.Show(WindowInsets.Type.SystemBars());
                }
                else
                {
                   context.Window.DecorView.SystemUiVisibility = (StatusBarVisibility)originalUiOptions;
                }

                videoViewCallback.OnCustomViewHidden();
                customView = null;
                videoViewCallback = null;
            }
        }

        public override void OnShowCustomView(Android.Views.View view, ICustomViewCallback callback)
        {
            if (customView != null)
            {
                OnHideCustomView();
                return;
            }

            if (context == null)
                return;

            videoViewCallback = callback;
            customView = view;
            customView.SetBackgroundColor(Android.Graphics.Color.White);
            context.RequestedOrientation = Android.Content.PM.ScreenOrientation.Landscape;

            if (Build.VERSION.SdkInt >= Android.OS.BuildVersionCodes.R)
            {
                context.Window.SetDecorFitsSystemWindows(false);
                context.Window.InsetsController?.Hide(WindowInsets.Type.SystemBars());
            }
            else
            {
                originalUiOptions = (int)context.Window.DecorView.SystemUiVisibility;
                var newUiOptions = originalUiOptions | (int)SystemUiFlags.LayoutStable | (int)SystemUiFlags.LayoutHideNavigation | (int)SystemUiFlags.LayoutHideNavigation |
                                (int)SystemUiFlags.LayoutFullscreen | (int)SystemUiFlags.HideNavigation | (int)SystemUiFlags.Fullscreen | (int)SystemUiFlags.Immersive;

                context.Window.DecorView.SystemUiVisibility = (StatusBarVisibility)newUiOptions;
            }

            if (context.Window.DecorView is FrameLayout layout)
                layout.AddView(customView, new FrameLayout.LayoutParams(ViewGroup.LayoutParams.MatchParent, ViewGroup.LayoutParams.MatchParent));
        }

        private bool IsTablet(Activity context)
        {
            return (context.Resources.Configuration.ScreenLayout & ScreenLayout.SizeMask) >= ScreenLayout.SizeLarge;
        }
    }
}


  • 创建一个静态类 webviewhandler.cs 并添加以下代码:
#if ANDROID
using Android.Graphics;
using Android.Webkit;
using Android.Widget;
using Android.App;
using static Android.Webkit.WebChromeClient;
using Android.Views;
using DemoApp.Platforms;
using Microsoft.Maui.Handlers;
#endif

namespace DemoApp.Handlers;

public class WebViewHandler
{
    public static void EnableVideoFeatures()
    {
#if ANDROID
        Microsoft.Maui.Handlers.WebViewHandler.Mapper.ModifyMapping(
        nameof(Android.Webkit.WebView.WebChromeClient),
        (handler, view, args) =>
        {
            handler.PlatformView.SetWebChromeClient(new WebPlayerChromeClient(handler));
        });
#endif
    }
}


  • 注册处理程序 在 mauipragram.cs 文件寄存器上 WebViewHandler.EnableVideoFeatures();

结论

在这篇文章中,您学习了如何使用自定义处理程序和一些本机代码启用.NET MAUI WebViews的全屏视频功能。此功能可以通过允许用户在全屏模式观看视频,而无需离开网络浏览或打开新活动,从而增强了应用程序的用户体验。希望您发现这篇文章有用且内容丰富。如果您有任何疑问或反馈,请在下面发表评论。

感谢您的阅读!在Twitter上关注我 @ivictorhugo