.NET MAUI iOS平台WebView视频仅有声无画面问题求助

.NET MAUI应用中使用WebView播放视频，Android平台运行正常，但在iOS平台仅iPhone 14（iOS 16.4）及更早版本中，视频启动播放时不可见，仅能听到音频；iPhone 15（iOS 17.4）及更高版本显示正常。

初始WebView代码 #

<WebView  
    BackgroundColor="Transparent"
    x:Name="video_webview"
    HorizontalOptions="FillAndExpand">
    <WebView.HeightRequest>
        <OnIdiom x:TypeArguments="x:Double">
            <OnIdiom.Phone>250</OnIdiom.Phone>
            <OnIdiom.Tablet>325</OnIdiom.Tablet>
            <OnIdiom.Desktop>250</OnIdiom.Desktop>
        </OnIdiom>
    </WebView.HeightRequest>
</WebView>

// 后台代码
video_webview.Source = videoUrl;

更新：完整页面XAML结构 #

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage>

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="8*" />
            <RowDefinition Height="0.1*" />
            <RowDefinition Height="8*" />
            <RowDefinition Height="83.9*" />
        </Grid.RowDefinitions>

        <Grid Grid.Row="0">
             <!--Header Layout-->
        </Grid>

        <BoxView 
            Grid.Row="1"/>

        <StackLayout
            Grid.Row="2">

        </StackLayout>

        <ScrollView
          Grid.Row="3">

            <Grid
                HorizontalOptions="FillAndExpand"
                VerticalOptions="FillAndExpand">

                <Grid.RowDefinitions>
                    <RowDefinition Height="5*" />
                    <RowDefinition Height="10*" />
                    <RowDefinition Height="5*" />
                    <RowDefinition Height="40*" />
                    <RowDefinition Height="40*" />
                </Grid.RowDefinitions>

                <Grid 
                    Grid.Row="0">
                </Grid>

                <CollectionView 
                    Grid.Row="1">
                    
                </CollectionView>

                <Label
                    Grid.Row="2">
                </Label>
                
                <!-- WebView位置 -->
                <WebView  
                    Grid.Row="3"
                    BackgroundColor="Transparent"
                    x:Name="video_webview"
                    Margin="0,5,0,0"
                    HorizontalOptions="FillAndExpand">
                    <WebView.HeightRequest>
                        <OnIdiom x:TypeArguments="x:Double">
                            <OnIdiom.Phone>250</OnIdiom.Phone>
                            <OnIdiom.Tablet>325</OnIdiom.Tablet>
                            <OnIdiom.Desktop>250</OnIdiom.Desktop>
                        </OnIdiom>
                    </WebView.HeightRequest>
                </WebView>

                <Frame
                    Grid.Row="4">
                </Frame>

                <Frame
                    Grid.Row="3">
                </Frame>
            </Grid>
        </ScrollView>
    </Grid>
</ContentPage>

问题分析与解决方案 #

这是MAUI在iOS 16.4及更早版本上的已知渲染问题：WebView嵌套在ScrollView中时，旧版iOS的WebKit引擎会出现视频图层被遮挡或未正确初始化的情况，导致仅音频播放无画面。以下是可行的解决方案：

方案1：移除WebView的透明背景

旧版iOS对透明背景的WebView图层处理存在bug，将BackgroundColor="Transparent"改为具体颜色（如White）即可解决：

<WebView  
    Grid.Row="3"
    BackgroundColor="White"
    x:Name="video_webview"
    Margin="0,5,0,0"
    HorizontalOptions="FillAndExpand">
    <!-- 其余代码保持不变 -->
</WebView>

方案2：自定义iOS WebView渲染器调整配置

通过自定义渲染器强制WKWebView的媒体播放配置，确保视频图层正确加载：

1. 在iOS项目中创建自定义渲染器类：

using Microsoft.Maui.Handlers;
using WebKit;
using UIKit;

namespace YourAppNamespace.Platforms.iOS;

public class CustomWebViewHandler : WebViewHandler
{
    protected override void ConnectHandler(WKWebView platformView)
    {
        base.ConnectHandler(platformView);
        // 允许媒体自动播放，关闭透明图层
        platformView.Configuration.MediaTypesRequiringUserActionForPlayback = WKAudiovisualMediaTypes.None;
        platformView.Opaque = true;
        platformView.BackgroundColor = UIColor.White;
    }
}

2. 在MauiProgram.cs中注册该渲染器：

builder.ConfigureMauiHandlers(handlers =>
{
#if IOS
    handlers.AddHandler<WebView, CustomWebViewHandler>();
#endif
});

方案3：将WebView移出ScrollView（布局允许时）

如果页面布局可以调整，将WebView从ScrollView中移出，直接放在Grid的独立行中，避免滚动容器导致的图层渲染冲突：

<!-- 修改主Grid的RowDefinitions -->
<Grid.RowDefinitions>
    <RowDefinition Height="8*" />
    <RowDefinition Height="0.1*" />
    <RowDefinition Height="8*" />
    <RowDefinition Height="Auto" /> <!-- 适配WebView高度 -->
    <RowDefinition Height="*" /> <!-- 剩余空间分配给原ScrollView内容 -->
</Grid.RowDefinitions>

<!-- WebView单独放置在Row3 -->
<WebView  
    Grid.Row="3"
    BackgroundColor="White"
    x:Name="video_webview"
    Margin="0,5,0,0"
    HorizontalOptions="FillAndExpand">
    <!-- 其余代码不变 -->
</WebView>

<!-- 原ScrollView移至Row4 -->
<ScrollView Grid.Row="4">
    <!-- 原ScrollView内的内容 -->
</ScrollView>

内容的提问来源于stack exchange，提问作者Matthew Pans