React Native WebView加载Vimeo视频时封面与标识图片无法显示求助

问题背景 #

使用react-native@0.70.5和react-native-webview@11.23.1，通过WebView加载Vimeo视频时，出现徽章和播放前封面图无法加载的问题，原代码及截图对比如下：

原WebView代码 #

<WebView
  allowsFullscreenVideo={true}
  source={{ uri: "https://player.vimeo.com/video/65107797" }}
  javaScriptEnabled={true}
  scrollEnabled={false}
  originWhitelist={["*"]}
  style={{ height: 300 }}
/>

截图对比 #

• iOS模拟器中的视频显示效果：
  

• 浏览器中的正常显示效果：
  

解决方案 #

1. 模拟浏览器User-Agent #

Vimeo可能会根据请求的User-Agent限制资源加载，WebView默认UA与浏览器不同，可手动设置UA模拟移动端浏览器：

<WebView
  allowsFullscreenVideo={true}
  source={{ uri: "https://player.vimeo.com/video/65107797" }}
  javaScriptEnabled={true}
  scrollEnabled={false}
  originWhitelist={["*"]}
  // 模拟iPhone Safari的UA
  userAgent="Mozilla/5.0 (iPhone; CPU iPhone OS 16_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/16.0 Mobile/15E148 Safari/604.1"
  style={{ height: 300 }}
/>

2. 使用Vimeo官方嵌入HTML替代直接URI #

直接加载Vimeo提供的嵌入iframe代码，能确保资源加载逻辑与浏览器一致：

<WebView
  allowsFullscreenVideo={true}
  javaScriptEnabled={true}
  scrollEnabled={false}
  originWhitelist={["*"]}
  source={{
    html: `
      <iframe 
        src="https://player.vimeo.com/video/65107797" 
        width="100%" 
        height="100%" 
        frameborder="0" 
        allow="autoplay; fullscreen; picture-in-picture" 
        allowfullscreen>
      </iframe>
    `,
  }}
  style={{ height: 300 }}
/>

3. iOS端配置App Transport Security（ATS） #

如果是iOS端存在资源加载限制，可在Info.plist中添加Vimeo域名的ATS例外：

<key>NSAppTransportSecurity</key>
<dict>
  <key>NSExceptionDomains</key>
  <dict>
    <key>vimeo.com</key>
    <dict>
      <key>NSIncludesSubdomains</key>
      <true/>
      <key>NSAllowsArbitraryLoads</key>
      <true/>
    </dict>
  </dict>
</dict>

注：提交App Store时需说明ATS例外的必要性，优先使用针对特定域名的配置而非全局允许任意加载。

4. Android端启用混合内容支持 #

若Android端存在资源加载问题，可添加混合内容相关配置：

<WebView
  // 其他属性保持不变
  allowFileAccess={true}
  mixedContentMode="compatibility" // 允许加载HTTPS页面中的HTTP资源
/>

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