iOS开发：视频播放结束后自动关闭WKWebView播放器

要实现视频播放完毕后关闭WKWebView，你可以通过WKScriptMessageHandler实现Web端与原生端的通信，监听视频播放结束事件并触发移除WebView的操作，具体实现如下：

1. 让ViewController遵守WKScriptMessageHandler协议 #

在你的ViewController类声明中添加协议，并实现消息接收方法，同时处理循环引用问题：

class YourViewController: UIViewController, WKScriptMessageHandler {
    
    var myPlayer: WKWebView!
    
    // 接收JS发来的消息
    func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
        if message.name == "videoDidEnd" {
            // 移除WKWebView并置空，释放内存
            myPlayer.removeFromSuperview()
            myPlayer = nil
        }
    }
    
    // 页面销毁时移除消息监听，避免内存泄漏
    deinit {
        myPlayer?.configuration.userContentController.removeScriptMessageHandler(forName: "videoDidEnd")
    }
    
    // 你的其他业务代码...
}

2. 修改playvideo方法，添加消息监听与导航代理 #

更新播放按钮点击方法，配置WebView时注册消息监听器，并设置导航代理以注入JS代码：

@IBAction func playvideo(_ sender: Any) {
    let webConfiguration = WKWebViewConfiguration()
    webConfiguration.allowsInlineMediaPlayback = true
    webConfiguration.mediaTypesRequiringUserActionForPlayback = []
    
    // 注册消息处理器，监听"videoDidEnd"事件
    webConfiguration.userContentController.add(self, name: "videoDidEnd")
    
    // 用当前视图的bounds设置WebView尺寸（iOS13+推荐写法，替代keyWindow）
    myPlayer = WKWebView(frame: self.view.bounds)
    myPlayer.navigationDelegate = self
    self.view.addSubview(myPlayer)
    
    if let filePath = Bundle.main.path(forResource: "test", ofType: "mp4") {
        let filePathURL = URL(fileURLWithPath: filePath)
        let request = URLRequest(url: filePathURL)
        myPlayer.load(request)
    }
}

3. 实现WKNavigationDelegate，注入监听视频结束的JS #

让ViewController额外遵守WKNavigationDelegate协议，在页面加载完成后注入JS代码监听视频结束事件：

extension YourViewController: WKNavigationDelegate {
    func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
        // 注入JS代码，监听video元素的ended事件
        let jsScript = """
        var videos = document.getElementsByTagName('video');
        if (videos.length > 0) {
            videos[0].addEventListener('ended', function() {
                window.webkit.messageHandlers.videoDidEnd.postMessage(null);
            });
        }
        """
        webView.evaluateJavaScript(jsScript, completionHandler: nil)
    }
}

关键逻辑说明： #

• 通过WKUserContentController注册自定义消息处理器，建立Web端与原生端的通信通道。
• WebView加载完成后注入的JS代码，会自动捕获页面中的video元素，监听其播放结束的ended事件，触发时向原生发送消息。
• 原生收到消息后执行移除WebView的操作，完成自动关闭逻辑。
• 在deinit中移除消息处理器，避免循环引用导致的内存泄漏。

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