iOS WkWebView内嵌YouTube iframe播放器控制层因触摸抬起事件缺失卡顿

针对你遇到的问题，完全可以通过手动控制播放器UI或重置JS事件状态来解决，以下是具体可行的方案：

方案1：利用YouTube Player API主动控制UI状态 #

YouTube官方提供的Player API支持直接控制播放器的UI元素，这是最可靠的方式：

1. 确保页面已引入YouTube Player API（若页面未自带，可通过WkWebView注入脚本添加）：

var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

2. 在App的生命周期钩子（比如applicationWillResignActive或WkWebView的didFinishNavigation）中，注入JS代码触发播放器UI重置：

// 获取YouTube播放器实例（多播放器场景需调整选择器）
var player = document.querySelector('iframe[src*="youtube.com/embed"]');
if (player && player.contentWindow && player.contentWindow.postMessage) {
    // 暂停视频并重置UI状态
    player.contentWindow.postMessage('{"event":"command","func":"pauseVideo","args":""}', '*');
    // 临时隐藏控制栏后恢复，强制刷新UI
    player.contentWindow.postMessage('{"event":"command","func":"setOption","args":["controls",0]}', '*');
    setTimeout(() => {
        player.contentWindow.postMessage('{"event":"command","func":"setOption","args":["controls",1]}', '*');
    }, 500);
}

方案2：模拟触摸抬起事件修复状态异常 #

问题根源是播放器未捕获touchend事件，可通过JS模拟该事件强制刷新状态：

在App恢复前台时，注入以下脚本：

var playerElement = document.querySelector('.html5-video-player');
if (playerElement) {
    // 创建并派发touchend事件
    const touchendEvent = new TouchEvent('touchend', {
        bubbles: true,
        cancelable: true
    });
    playerElement.dispatchEvent(touchendEvent);
    // 辅助派发click事件强化重置效果
    playerElement.dispatchEvent(new Event('click'));
}

方案3：极端情况重置WebView状态 #

如果上述方案无效，可在App重新激活时，对WkWebView执行轻量重置：

• 暂停当前iframe的视频播放
• 重新加载iframe的src（无需刷新整个页面）：

var iframe = document.querySelector('iframe[src*="youtube.com/embed"]');
if (iframe) {
    const originalSrc = iframe.src;
    iframe.src = '';
    setTimeout(() => {
        iframe.src = originalSrc;
    }, 100);
}

注意事项 #

• 所有JS注入操作需在WkWebView的evaluateJavaScript(_:completionHandler:)方法中执行
• 多播放器场景需调整DOM选择器精准定位目标播放器
• 建议在applicationDidBecomeActive和applicationWillResignActive生命周期节点分别执行重置和暂停操作，提前规避状态异常

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