当 WKMediaPlaybackState 改变时如何得到通知

Question

How can add an observer that runs a callback when the value of the webView's WKMediaPlaybackState changes

I'm trying to do some changes when the vimeo video in the webView is paused

this is my code

@IBOutlet weak var vimeoVideoPlayer: WKWebView!

func buildVimeoVideoPlayer(with video: Video) {
    let url = URL(string: "https://player.vimeo.com/video/\(video.id)")!
    let requestObj = URLRequest(url: url)
    vimeoVideoPlayer.load(requestObj)
    vimeoVideoPlayer.contentMode = UIView.ContentMode.scaleAspectFit
    vimeoVideoPlayer.configuration.allowsAirPlayForMediaPlayback = true
    vimeoVideoPlayer.configuration.allowsInlineMediaPlayback = true
    vimeoVideoPlayer.configuration.allowsPictureInPictureMediaPlayback = true
    
    vimeoVideoPlayer.navigationDelegate = self
    vimeoVideoPlayer.scrollView.isScrollEnabled = false

    vimeoVideoPlayer.requestMediaPlaybackState { mediaState in
            switch mediaState {
            case .paused:
                print("the video was Paused")
            case .playing:
                print("the video is playing")
            case .suspended:
                print("the video is suspended")
            default:
                break
            }
    }
}

at the moment I'm using the requestMediaPlaybackState function but this only runs once

Answer 1

You can observe the video player's state directly from java script and to do that you should add needed event listeners to the video object and then post a state to native via webkit.messageHandlers :

webView.configuration.userContentController.add(self, name: "playbackMessageHandler")

let js = """
    function onPlaybackState(playbackState) {
        const { webkit: { messageHandlers: { playbackMessageHandler } } } = window;
        playbackMessageHandler?.postMessage({ playbackState });
    };

    window.addEventListener('load', (event) => {
        const video = document.querySelector('video');
        video?.addEventListener('play', (event) => onPlaybackState('playing'));
        video?.addEventListener('pause', (event) => onPlaybackState('paused'));
        video?.addEventListener('suspend', (event) => onPlaybackState('suspended'));
    });
"""

let script = WKUserScript(source: js, injectionTime: .atDocumentEnd, forMainFrameOnly: false)
webView.configuration.userContentController.addUserScript(script)

webView.load(...)

...

extension ViewController: WKScriptMessageHandler {
    
    func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
        guard let body = message.body as? [String : String], let playbackState = body["playbackState"] else { return }
        print(playbackState)
    }   
}