Cordova 9.0安卓端HTML5 Video仅首次全屏可用问题求助

问题现象 #

• 应用启动后首次点击全屏按钮可正常进入全屏
• 后续每次点击全屏按钮仅出现短暂闪屏，无法进入全屏
• 锁屏解锁或回到主屏幕再重启应用后，视频会显示为全屏
• 强制关闭并重新打开应用后，会回到首次正常的循环

已知信息 #

• Chrome开发者工具显示：正常场景下视频会被分配#top-layer，异常场景则不会
• 异常场景下，下拉通知栏也无法让视频全屏
• 调用video_element.requestFullScreen()和video_element.webkitRequestFullScreen()无报错
• 全屏按钮在任何场景下都不会被禁用
• 尝试过调整setSystemUiVisibility配置、修改CordovaActivity.java生命周期、禁用Cordova“fullscreen”偏好，均无效
• 该问题仅出现在Chrome 74及以上版本
• 仅保留最基础的HTML视频标签代码，问题依然存在

最小复现代码 #

<html>
<head>
</head>
<body>
<video id="video1" style="width:600px;max-width:100%;" controls="">
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
</video>
</body>
</html>

可行解决方案尝试 #

1. 调整Cordova WebView配置 #

在config.xml中添加以下配置，强制WebView使用兼容模式：

<preference name="WebViewEngine" value="system" />
<preference name="MediaPlaybackRequiresUserAction" value="false" />

同时在CordovaActivity.java的onCreate方法中补充WebView设置：

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O) {
    webView.getSettings().setAllowContentAccess(true);
    webView.getSettings().setAllowFileAccess(true);
}

2. 手动重置全屏状态 #

通过监听全屏变化事件，在退出全屏时强制重置视频元素状态，避免残留异常：

const video = document.getElementById('video1');
let isFullscreen = false;

// 监听全屏状态变化
['fullscreenchange', 'webkitfullscreenchange'].forEach(event => {
    video.addEventListener(event, () => {
        isFullscreen = !isFullscreen;
        if (!isFullscreen) {
            // 强制重置视频尺寸，清除异常状态
            video.style.width = '100%';
            setTimeout(() => video.style.width = '', 100);
        }
    });
});

// 替换原生全屏按钮事件
document.querySelector('video::-webkit-media-controls-fullscreen-button')?.addEventListener('click', (e) => {
    e.preventDefault();
    if (!isFullscreen) {
        video.requestFullscreen().catch(console.log);
    } else {
        document.exitFullscreen();
    }
});

3. 降级Cordova Android插件版本 #

将cordova-android插件降级到8.1.x版本，该版本对Chrome 74+的兼容性问题处理更完善：

cordova platform remove android
cordova platform add android@8.1.0

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