How to implement Picture in Picture Webview on IOS Swift?

Question

I new swift , i want to implement feature picture in picture (PiP) in webview for android , ios . I've found all the posts here and implement some code :

for android (https://stackoverflow.com/a/54061449/15311463) It working

for ios not working . I configed BackgourdMode in Xcode . What i am missing ?

private var pictureInPictureController: AVPictureInPictureController!
let source = """
                    document.addEventListener('click', function(e){
                        if (e.target.id === 'pip_mobile_btn_img') {
                            window.webkit.messageHandlers.iosListener.postMessage('true');
                        }
                    })
                """
    func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
        //self.performSegue(withIdentifier: "goToPlayer", sender: self)
        //print("Hello Thinh")
        if #available(iOS 14.2, *) {
          self.pictureInPictureController.canStartPictureInPictureAutomaticallyFromInline = true
          self.pictureInPictureController.startPictureInPicture()
        }
    }
    override func loadView() {
        let webConfiguration = WKWebViewConfiguration()
        webConfiguration.allowsInlineMediaPlayback = true
        webConfiguration.mediaTypesRequiringUserActionForPlayback = []
        
        let script = WKUserScript(source: source, injectionTime: .atDocumentEnd, forMainFrameOnly: false)
        webConfiguration.userContentController.addUserScript(script)
        webConfiguration.userContentController.add(self, name: "iosListener")
        
        webView = WKWebView(frame: .zero, configuration: webConfiguration)
        webView.scrollView.isScrollEnabled = false
        webView.isOpaque = true
        webView.scrollView.bounces = false

    }
    override func viewDidLoad() {
        super.viewDidLoad()
        webView.uiDelegate = self
        webView.navigationDelegate = self
        view = webView
        
        let myRequest = URLRequest(url: URL(string: playerURL)!)
        webView.load(myRequest)
    }

Jayesh Patel · Answer 1 · 2021-10-14T07:49:31.487

1

You can get or set allowsPictureInPictureMediaPlayback for your wkwebviewconfiguration

WKWebViewConfiguration().allowsPictureInPictureMediaPlayback = true

A user can disable Picture in Picture’s automatic invocation in Settings > General > Picture in Picture > Start Pip Automatically. If you think you’ve set up everything correctly and find that your video does not enter PiP when you press the Home button, check this settings.

edited Oct 14 '21 at 07:49

answered Oct 14 '21 at 05:44

Jayesh Patel

938
5
16

all my UI is webview , it suitable for your code ? @Jayesh Patel – Doctor Strange Oct 14 '21 at 07:16
1

I have edited my answer for that – Jayesh Patel Oct 14 '21 at 07:29
then , i can resize webview ? like : ` if WKWebViewConfiguration().allowsPictureInPictureMediaPlayback{ // resize webview or some idea ? } – Doctor Strange Oct 14 '21 at 07:44
WKWebViewConfiguration().allowsPictureInPictureMediaPlayback = true – Jayesh Patel Oct 14 '21 at 07:53
yes , i know , but my feature is : when press button on webview . my app will PiP (webview resize , i think so) . ` func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) { //self.performSegue(withIdentifier: "goToPlayer", sender: self) print("Hello") WKWebViewConfiguration().allowsPictureInPictureMediaPlayback = true } ` – Doctor Strange Oct 14 '21 at 08:08

How to implement Picture in Picture Webview on IOS Swift?

1 Answers1