React Native Android WebView中Vimeo播放器控制栏消失问题及解决方法分享

问题描述 #

最近在React Native Android项目里用WebView加载带Vimeo视频的页面时，碰到了个头疼的问题——视频能正常播放，但播放一会儿后控制栏就自动消失了，完全没法暂停、调整进度或者切换音量，用户体验直接拉胯。

临时解决方案 #

折腾了好一阵调试，终于找到个能暂时解决这个问题的方法，核心是通过注入自定义JavaScript来强制Vimeo播放器的控制栏保持可见，具体步骤如下：

1. 注入定时触发控制栏显示的JS代码
   在WebView的injectedJavaScript属性中添加以下代码，通过定时模拟播放器的hover状态，让控制栏持续能被看到：

   setInterval(() => {
     // 定位页面中所有Vimeo视频的iframe
     const vimeoIframes = document.querySelectorAll('iframe[src*="vimeo.com"]');
     vimeoIframes.forEach(iframe => {
       try {
         // 获取iframe内部的文档对象
         const iframeDocument = iframe.contentDocument || iframe.contentWindow.document;
         if (iframeDocument) {
           // 找到Vimeo播放器容器，添加hover类强制唤起控制栏
           const playerContainer = iframeDocument.querySelector('.player');
           if (playerContainer) {
             playerContainer.classList.add('player--hover');
             // 1秒后移除类，模拟真实hover的交互逻辑，避免样式异常
             setTimeout(() => {
               playerContainer.classList.remove('player--hover');
             }, 1000);
           }
         }
       } catch (e) {
         // 跨域场景可能会报错，这里做简单的错误捕获
         console.log('操作Vimeo播放器时出错:', e);
       }
     });
   }, 3000); // 每3秒触发一次，可根据实际需求调整间隔时长
   

2. 配置WebView的必要属性
   确保WebView开启了JavaScript支持和DOM存储，同时根据业务需求设置媒体播放相关属性：

   import { WebView } from 'react-native-webview';
   
   // 在组件中使用配置后的WebView
   <WebView
     source={{ uri: '你的目标页面URL' }}
     javaScriptEnabled={true}
     domStorageEnabled={true}
     mediaPlaybackRequiresUserAction={false} // 如果需要自动播放可开启，按需设置
     injectedJavaScript={上述JS代码}
   />
   

方案说明 #

这个方案本质上是通过定时触发Vimeo播放器的hover状态样式，强制控制栏保持可见。虽然属于临时 workaround，但能有效解决控制栏消失后无法操作的问题。需要注意的是，如果Vimeo后续更新了播放器的DOM结构或类名，这段代码可能需要相应调整适配。

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