Xamarin Forms Webview html 视频不在 iOS 设备上播放
Posted
技术标签:
【中文标题】Xamarin Forms Webview html 视频不在 iOS 设备上播放【英文标题】：Xamarin Forms Webview html video not playing on iOS devices 【发布时间】：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 设备。该问题仅在实际设备上出现，模拟器播放视频正常。希望您能够复制该问题。
【参考方案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" 但否则可以正常播放视频。以上是关于Xamarin Forms Webview html 视频不在 iOS 设备上播放的主要内容，如果未能解决你的问题，请参考以下文章
Xamarin.Forms自定义用户界面控件实现一个HybridWebView（混合webview）
无法使用 Xamarin.Forms WebView 进行 Dropbox 身份验证
Xamarin.Forms WebView 不适用于 WebRTC
最新 iOS 更新 (12.2) 后，本地存储中的视频未在 WebView (Xamarin.Forms) 中播放
在Xamarin.Forms应用程序中离开页面后，Webview不会关闭
Xamarin.Forms - 如果 webView 包含在 Android 上打开的模式或菜单，有没有办法禁用拉刷新？