Xamarin表单：ios平台上的webview中视频未完全填充

Posted 2023-03-25

【中文标题】Xamarin表单：ios平台上的webview中视频未完全填充

【英文标题】：Xamairn forms: Video is not fully filled in webview on ios platforrm

【发布时间】：2022-01-22 00:49:08

【问题描述】：

我正在使用webview 在 UI 上显示 html 数据（有视频）。它在 android 上运行良好，但在 ios 上，视频水平未完全填充。

截图

代码：

string htmlData = "<p style=\"text-align: center; \"><iframe webkitallowfullscreen=\"\" mozallowfullscreen=\"\" allowfullscreen=\"\" frameborder=\"0\" src=\"https://player.vimeo.com/video/641943496\" width=\"640\" height=\"360\" class=\"note-video-clip\"></iframe></p>\r\n<h3 style=\"text-align: center; \">The Catholic Brain series \"Advent with Father John\" can be <a href=\"https://www.catholicbrain.com/edu/videos/category/262/tag/602\" target=\"_blank\" class=\"msofficelink-link-handled\">found here</a>.<br></h3>\r\n<h4>Today&#39;s Gospel - Adapted from Matthew 4:18-22</h4>";
if (Device.OS == TargetPlatform.iOS)

    ios_web_view.IsVisible = true;
    ios_web_view.Url = htmlData.Replace("&#39;", "'");


if (Device.OS == TargetPlatform.Android)

    android_web_view.IsVisible = true;
    string description = htmlData.Replace("&#39;", "'");
    var htmlSource = new HtmlWebViewSource();
    htmlSource.Html = description.Replace("width=\"640\" height=\"360\"", "width=\"350\" height=\"350\"");
    android_web_view.Source = htmlSource;

我正在使用自定义渲染器来增加文本大小。我已经上传了一个示例项目here 供参考。我需要在ios中水平填充视频。

更新：29-12-2021

我能够创建一个包含该问题的示例项目。我在我这边进行了测试，内容显示在 ios 部分。我的问题是视频没有水平填充。 示例链接：https://drive.google.com/file/d/17p_yEB7wsUozkA6kJV_jcvE-MAu3LGIS/view?usp=sharing

【参考方案1】：

您可以创建两个htmlData字符串并设置高度和宽度，并根据您使用的平台使用相应的字符串。

这是后台代码：

public partial class MainPage : ContentPage

    public MainPage()
    
        InitializeComponent();

        string htmlData = "<p style=\"text-align: center; \"><iframe webkitallowfullscreen=\"\" mozallowfullscreen=\"\" allowfullscreen=\"\" frameborder=\"0\" src=\"https://player.vimeo.com/video/641943496\" data-wf-ignore=\"true\" width=\"900\" height=\"360\" class=\"note-video-clip\"></iframe></p>\r\n<h3 style=\"text-align: center; \">The Catholic Brain series \"Advent with Father John\" can be <a href=\"https://www.catholicbrain.com/edu/videos/category/262/tag/602\" target=\"_blank\" class=\"msofficelink-link-handled\">found here</a>.<br></h3>\r\n<h4>Today&#39;s Gospel - Adapted from Matthew 4:18-22</h4>";
        string htmlData1 = "<p style=\"text-align: center; \"><iframe webkitallowfullscreen=\"\" mozallowfullscreen=\"\" allowfullscreen=\"\" frameborder=\"0\" src=\"https://player.vimeo.com/video/641943496\" width=\"400\" height=\"360\" class=\"note-video-clip\"></iframe></p>\r\n<h3 style=\"text-align: center; \">The Catholic Brain series \"Advent with Father John\" can be <a href=\"https://www.catholicbrain.com/edu/videos/category/262/tag/602\" target=\"_blank\" class=\"msofficelink-link-handled\">found here</a>.<br></h3>\r\n<h4>Today&#39;s Gospel - Adapted from Matthew 4:18-22</h4>";

        myviewview.IsVisible = true;
        string description = htmlData.Replace("&#39;", "'");
        string description1 = htmlData1.Replace("&#39;", "'");
        var htmlSource = new HtmlWebViewSource(); 
        if (Device.OS == TargetPlatform.iOS)
        
            htmlSource.Html = description;
            myviewview.Source = htmlSource;
        
        if (Device.OS == TargetPlatform.Android)
        
            htmlSource.Html = description1;
            myviewview.Source = htmlSource;
        
    

【讨论】：

只需要更新width=\"900\" 还是需要在width值前加上data-wf-ignore=\"true\"？

它对你有用吗？

根据我的测试，它可以在没有 ata-wf-ignore=\"true\" 宽度的情况下工作。您可以将其复制并粘贴到您的代码中进行尝试。

我的ios出现白屏，是你这边发生的吗？

请检查您是否已授予网络权限。