Xamarin Forms Webview html 视频无法在 iOS 设备上播放

Question

我有一个使用 WebView 的 Xamarin Forms (4.2) 应用程序。这是 Webview.xaml 页面：

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:d="http://xamarin.com/schemas/2014/forms/design"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             mc:Ignorable="d"
             BackgroundColor="#66B1D1"
             NavigationPage.HasNavigationBar="False"
             x:Class="ParentsApp.Pages.WebViewPage">
    <ContentPage.Content>
        <AbsoluteLayout>
            <Grid AbsoluteLayout.LayoutFlags="All" AbsoluteLayout.LayoutBounds="0,1,1,1">
                <StackLayout>
                    <WebView x:Name="WebView" Source="https://www.testsite.com/testvideo.aspx"></WebView>
                </StackLayout>
            </Grid>
        </AbsoluteLayout>
    </ContentPage.Content>
</ContentPage>

WebViews 源指向包含视频的基本 Html 页面：

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <div>
             <video poster="https://ljtest.blob.core.windows.net/test/b5de01eb-2ecd-41e8-a7d6-2099b11ebbcd_thumbnail.jpg" style="max-height: 345px; max-width: 614px;" controls preload="none" loop muted>
                <source src="https://ljtest.blob.core.windows.net/test/b5de01eb-2ecd-41e8-a7d6-2099b11ebbcd_converted.mp4" type="video/mp4">
             </video>
        </div>
    </form>
</body>
</html>

我们看到带有播放图标的视频缩略图，单击该图标会做出反应，但视频不会播放。

我有一个 iPhone 5s (12.4.3)、iPhone X (13.1) 和 iPad（第 5 代 13.2.3）。如果我在同一个 iOS 设备上打开 safari 并转到相同的 html 页面，视频就会播放。

视频在 Android 台设备上播放正常。

11 月 28 日更新

我创建了一个解决方案，其中包含一个基本的 Xamarin 表单应用程序（只有一个 WebView）和一个基本的 Web 应用程序（包含视频元素的单个 html 页面），您可以在 github

我还阅读了最新的 iOS video policies，认为它可能相关，但如果我在我们的任何 iOS 设备上使用 safari 并导航到 Xamarin WebView 指向的同一页面，请重申到视频播放。

在制作中，视频将托管在 Azure 存储中。为了排除任何可能的问题，此示例中的缩略图和视频托管在测试网站上。

Answer 1

您可以尝试使用 WkWebView 并将 MediaPlaybackRequiresUserAction 设置为 false 来解决您的问题吗？

在custom renderer:

[assembly: ExportRenderer(typeof(CustomWebView), typeof(MyCustomWebViewRenderer))]
namespace App1.iOS
{
    public class MyCustomWebViewRenderer : ViewRenderer<CustomWebView, WKWebView>
    {
        protected override void OnElementChanged(ElementChangedEventArgs<CustomWebView> e)
        {
            base.OnElementChanged(e);

            if (Control == null)
            {
                var webView = new WKWebView(Frame, new WKWebViewConfiguration() { MediaPlaybackRequiresUserAction = false});
                SetNativeControl(webView);
            }
            if (e.NewElement != null)
            {
                Control.LoadRequest(new NSUrlRequest(new NSUrl(Element.Uri)));
            }
        }
    }
}

和 customWebView:

public class CustomWebView : WebView
{
    public static readonly BindableProperty UriProperty = BindableProperty.Create(
        propertyName: "Uri",
        returnType: typeof(string),
        declaringType: typeof(CustomWebView),
        defaultValue: default(string));

    public string Uri
    {
        get { return (string)GetValue(UriProperty); }
        set { SetValue(UriProperty, value); }
    }
}

在Xaml中：

<StackLayout>
    <app1:CustomWebView Source="https://videotest2019.azurewebsites.net/" Uri="https://videotest2019.azurewebsites.net/" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" />
</StackLayout>

Xamarin Forms Webview html 视频无法在 iOS 设备上播放

Xamarin Forms Webview html video not playing on iOS devices

video

webview

ios

xamarin

xamarin.forms