Swift中AVPlayer的play()/pause()对WKWebView嵌入Youtube视频无效

问题表现 #

• 自定义暂停UIButton放置在承载视频的WKWebView下方，点击按钮时可通过print日志确认点击事件正常触发，但执行player?.pause()无法让视频暂停。
• 已完成初步排查：控制按钮未覆盖在视频区域上方，完全位于WebView下方不存在视图遮挡；已尝试将playerControl()方法移至viewDidLoad生命周期调用，问题仍存在，初步怀疑故障与图层层级相关。

现有实现代码 #

WKWebView初始化 #

var webView: WKWebView! = {
    let configuration = WKWebViewConfiguration()
    configuration.allowsInlineMediaPlayback = true
    let webView = WKWebView(frame: .zero, configuration: configuration)
    webView.translatesAutoresizingMaskIntoConstraints = false
    return webView
}()

暂停按钮实现 #

lazy var pauseButton: UIButton = {
    let button = UIButton(type: .system)
    let image = UIImage(named: "Pause")
    button.setImage(image, for: .normal)
    button.tintColor = .white
    button.translatesAutoresizingMaskIntoConstraints = false
    
    button.addTarget(self, action: #selector(tapPause), for: .touchUpInside)
    
    return button
}()

@objc func tapPause() {
    print("pause player")
    player?.pause()
}

播放器控制逻辑 #

var player: AVPlayer?

func playerControl() {
    if let url = currentUrl {
        player = AVPlayer(url: url)
        
        let playerLayer = AVPlayerLayer(player: player)
        self.webView.layer.addSublayer(playerLayer)
        playerLayer.frame = self.webView.frame
        
        player!.play()
        player!.pause()
    }
}

问题根因 #

当前实现存在核心逻辑错误，和图层层级无关：

• WKWebView内加载渲染的Youtube视频由WebKit内核独立维护播放状态，和你手动创建的AVPlayer实例不存在任何绑定关系。你初始化的AVPlayer是加载了同一URL的独立播放对象，哪怕把它对应的AVPlayerLayer添加到WebView的图层上，也只是和WebView视图堆叠的独立图层，完全无法控制WebView内部的视频播放状态。
• 现有代码中playerControl()方法内对自建AVPlayer先后调用play()、pause()，意味着这个独立播放器初始化完成后就处于暂停状态，后续点击按钮触发的player?.pause()只是给这个已暂停、甚至未处于可见层级的播放器发指令，自然不会对WebView内正在播放的Youtube视频产生任何效果。

修复方案 #

方案1：通过JS调用WebView内视频元素控制（推荐） #

放弃自建AVPlayer控制WebView内容的错误思路，直接通过WKWebView执行JavaScript代码操作页面内的video标签实现控制：

1. 移除现有自建AVPlayer、AVPlayerLayer相关的所有代码，不需要额外创建原生播放器实例。
2. 点击暂停按钮时，执行以下代码即可暂停WebView内的Youtube视频：

@objc func tapPause() {
    print("pause player")
    webView.evaluateJavaScript("document.querySelector('video').pause()") { _, err in
        guard err == nil else {
            print("暂停指令执行失败: \(err!.localizedDescription)")
            return
        }
    }
}

3. 对应播放逻辑只需要把JS代码里的pause()替换为play()即可。如果使用官方Youtube iFrame API嵌入视频，可直接调用API提供的pauseVideo()、playVideo()方法，兼容性更好。

注意：若页面存在多个video元素，需要通过标签属性匹配到Youtube对应的视频元素再执行操作，避免误控页面内其他视频内容。

方案2：纯原生AVPlayer播放（不推荐） #

如果必须使用AVPlayer的控制能力，就不要通过WKWebView加载Youtube页面，直接获取视频直链后用AVPlayer+AVPlayerLayer做原生播放。注意该方案不符合Youtube服务条款，且视频直链存在有效期限制，稳定性无法保障。

内容的提问来源于stack exchange，提问作者iOS Swift-man Junior