Xamarin.iOS下WebView加载含360全景视频的HTML5内容异常问题

问题根因 #

你遇到的双击触发独立播放窗口的问题核心有两个：

• WKWebView的Configuration属性为只读属性，初始化完成后修改的播放配置不会生效，你现有代码将配置写在OnElementChanged中的逻辑无效
• 缺少强制视频内嵌播放的相关配置，以及未禁用默认的全屏播放触发逻辑

修复步骤 #

1. 调整配置代码位置，补充完整播放配置 #

将所有配置项移到构造方法中执行，同时补充禁用全屏、强制内嵌的相关参数，修改后的完整Renderer代码如下：

public class HybridWebViewRenderer : WkWebViewRenderer
{
    WKUserContentController userController;
    public HybridWebViewRenderer() : this(GetCustomConfig())
    {
    }
    public HybridWebViewRenderer(WKWebViewConfiguration config) : base(config)
    {
        userController = config.UserContentController;
        // 注入强制视频内嵌播放的JS脚本
        InjectInlineVideoScript(userController);
    }
    // 提前构造自定义配置，保证WKWebView初始化时配置就生效
    private static WKWebViewConfiguration GetCustomConfig()
    {
        var config = new WKWebViewConfiguration();
        config.AllowsInlineMediaPlayback = true;
        config.AllowsPictureInPicturePlayback = false;
        config.MediaTypesRequiringUserActionForPlayback = WKAudiovisualMediaTypes.None;
        config.Preferences.JavaScriptEnabled = true;
        config.Preferences.JavaScriptCanOpenWindowsAutomatically = true;
        return config;
    }
    // 注入JS强制所有video标签开启内联播放，禁用全屏属性、拦截双击事件
    private static void InjectInlineVideoScript(WKUserContentController userController)
    {
        string injectJs = @"
        var videos = document.getElementsByTagName('video');
        for(var i = 0; i < videos.length; i++) {
            videos[i].setAttribute('playsinline', '');
            videos[i].setAttribute('webkit-playsinline', '');
            videos[i].removeAttribute('allowfullscreen');
            videos[i].addEventListener('dblclick', function(e) {
                e.preventDefault();
                e.stopPropagation();
            });
        }
        ";
        var userScript = new WKUserScript((NSString)injectJs, WKUserScriptInjectionTime.AtDocumentEnd, false);
        userController.AddUserScript(userScript);
    }
    protected override void OnElementChanged(VisualElementChangedEventArgs e)
    {
        base.OnElementChanged(e);
        if (e.OldElement != null)
        {
            HybridWebView hybridWebView = e.OldElement as HybridWebView;
            hybridWebView.Cleanup();
        }
        if (e.NewElement != null)
        {
            BackgroundColor = UIColor.Clear;
            Opaque = false;
        }
    }
    public void DidReceiveScriptMessage(WKUserContentController userContentController, WKScriptMessage message)
    {
        ((HybridWebView)Element).InvokeAction(message.Body.ToString());
    }
    protected override void Dispose(bool disposing)
    {
        if (disposing)
        {
            ((HybridWebView)Element).Cleanup();
        }
        base.Dispose(disposing);
    }
}

2. 可选优化（如果可修改HTML源码） #

如果可以修改加载的HTML页面源码，直接给video标签添加如下属性即可，无需注入JS：

<video playsinline webkit-playsinline>
  <!-- 视频资源配置 -->
</video>

内容的提问来源于stack exchange，提问作者Mina Fawzy