Xamarin Forms Webview html 视频不在 iOS 设备上播放答案

【问题标题】：Xamarin Forms Webview html video not playing on iOS devicesXamarin Forms Webview html 视频不在 iOS 设备上播放
【发布时间】：2019-11-25 15:25:47
【问题描述】：

我有一个使用 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 存储中。为了排除任何可能的问题，本示例中的缩略图和视频托管在测试网站上。

【问题讨论】：

能否请您提供Minimal, Reproducible Example。
如果你AzureBlobStorageAccount以http开头，你必须在你的iOS项目中配置ATS来允许http请求。
@JackHua-MSFT 嗨 Jack - 添加了代码以显示 .xaml webview 页面，并使用真实的存储帐户、缩略图和视频更新了 html 视频。存储帐户已启用安全传输，因此我们始终通过 https 访问它
我将 html 页面加载为本地文件，它可以在我这边工作。我等了大约 5 秒（加载），视频开始播放。我上传了我的示例here。
@JackHua-MSFT 嗨，杰克，我在 github 上添加了一个最小的可重现示例 - 请参阅原始帖子中的更新部分 - 您应该能够将应用程序部署到 iOS 设备。该问题仅在实际设备上出现，模拟器播放视频正常。希望您能够复制该问题。

标签： ios xamarin video xamarin.forms webview

【解决方案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>

【讨论】：

谢谢杰克。我发现我需要在 CustomWebView 上显式设置 IsEnabled="True" 但否则可以正常播放视频。