如何在iOS的WKWebView中启用视频自动播放

问题描述 投票:0回答:1

我有一个包含iframe(HTML元素)的WebView。该iframe具有Peertube视频播放器,我将&autoplay=1传递给该iframe,它在android,iPad和浏览器上都可以正常运行,但是在iPhone上无法自动播放视频。

我尝试使用带有以下代码的WKWebView进行自定义渲染:

class FullScreenEnabledWebViewRenderer : WkWebViewRenderer
{
    WKUserContentController userController;

    public FullScreenEnabledWebViewRenderer() : this(new WKWebViewConfiguration() { MediaTypesRequiringUserActionForPlayback = WKAudiovisualMediaTypes.None, AllowsInlineMediaPlayback = true, MediaPlaybackRequiresUserAction = false, RequiresUserActionForMediaPlayback = false })
    {
    }

    public FullScreenEnabledWebViewRenderer(WKWebViewConfiguration config) : base(config)
    {
        config.AllowsInlineMediaPlayback = true;
        config.AllowsAirPlayForMediaPlayback = true;
        config.AllowsPictureInPictureMediaPlayback = true;
        config.MediaPlaybackAllowsAirPlay = true;
        config.MediaPlaybackRequiresUserAction = false;
        config.RequiresUserActionForMediaPlayback = false;
        config.MediaTypesRequiringUserActionForPlayback = WKAudiovisualMediaTypes.None;
    }
}

仍然不起作用。您能帮我吗?

xamarin xamarin.ios wkwebview
1个回答
0
投票

iOS中的Webview不能很好地支持iframe。因此最好使用<video> like

var htmlSource = new HtmlWebViewSource();

htmlSource.Html = @"<html><body><video width='300' height='500' muted='muted' controls autoplay='autoplay'><source src='https://ia800201.us.archive.org/12/items/BigBuckBunny_328/BigBuckBunny_512kb.mp4'  type='video/mp4'></video></body></html>";

webview.Source = htmlSource;

如果它仍然无法在iOS中自动播放,我们可以调用JS来播放它。

using System;


using Xamarin.Forms;
using Xamarin.Forms.Platform.iOS;

using App4;
using App4.iOS;
using WebKit;
using ObjCRuntime;

[assembly: ExportRenderer(typeof(WebView), typeof(FullScreenEnabledWebViewRenderer))]
namespace App4.iOS
{
    public class FullScreenEnabledWebViewRenderer: ViewRenderer<WebView, WKWebView>
    {
        WKWebView wkWebView;
        protected override void OnElementChanged(ElementChangedEventArgs<WebView> e)
        {
            base.OnElementChanged(e);

            if (Control == null)
            {
                var config = new WKWebViewConfiguration();

                config.AllowsInlineMediaPlayback = true;
                config.AllowsAirPlayForMediaPlayback = true;
                config.AllowsPictureInPictureMediaPlayback = true;
                config.MediaPlaybackAllowsAirPlay = true;
                config.MediaPlaybackRequiresUserAction = false;
                config.RequiresUserActionForMediaPlayback = false;
                config.MediaTypesRequiringUserActionForPlayback = WKAudiovisualMediaTypes.None;

                wkWebView = new WKWebView(Frame, config);
                wkWebView.NavigationDelegate = new WkWebviewPolicy();
                SetNativeControl(wkWebView);
            }


        }
    }


    public class WkWebviewPolicy : WKNavigationDelegate
    {

        public override void DecidePolicy(WKWebView webView, WKNavigationAction navigationAction, WKWebpagePreferences preferences, [BlockProxy(typeof(NIDActionArity2V120))] Action<WKNavigationActionPolicy, WKWebpagePreferences> decisionHandler)
        {
            decisionHandler.Invoke(WKNavigationActionPolicy.Allow, preferences);
            //base.DecidePolicy(webView, navigationAction, preferences, decisionHandler);
        }

        public override void DidFinishNavigation(WKWebView webView, WKNavigation navigation)
        {
            base.DidFinishNavigation(webView, navigation);

            var JSstr =  @"var videos = document.querySelectorAll('video'); for (var i = videos.length - 1; i >= 0; i--) { var ivideo = videos[i]; ivideo.setAttribute('webkit-playsinline','\'); ivideo.play(); };";

            webView.EvaluateJavaScript(JSstr,null);

        }

    }
}
© www.soinside.com 2019 - 2024. All rights reserved.