Expo开发React Native应用时Vimeo视频全屏功能问题咨询

现有WebView全屏按钮问题修复 #

你遇到的全屏按钮尺寸小、点击无响应的问题可以通过以下几个步骤修复：

• 首先删除代码中重复定义的allowsFullscreenVideo属性，冗余属性可能会导致WebView配置冲突
• 给WebView添加userAgent属性，强制使用移动端浏览器标识，触发Vimeo播放器的移动端适配逻辑，自动放大控制按钮的触控热区
• 在嵌入的HTML代码中添加viewport元标签，避免页面被强制缩放导致按钮尺寸变小
• 在Vimeo播放器的链接末尾追加&controls=1&playsinline=0参数，让Vimeo官方放大控制栏按钮的可点击范围
• 如果以上修改还是达不到预期，你可以直接在WebView外层加自定义的全屏按钮，通过引入的Vimeo Player API调用requestFullscreen()方法触发全屏，自定义按钮的尺寸可以按需调整，完全规避默认按钮的问题

修改后的WebView代码参考：

<WebView
  allowsFullscreenVideo
  scrollEnabled={false}
  style={{ backgroundColor: 'transparent', flex: 1}}
  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"
  source={{
    html: `
      <html>
        <head>
          <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
        </head>
        <body style="margin:0;padding:0;">
          <div style="padding:56.25% 0 0 0;position:relative;">
          <iframe src="https://player.vimeo.com/video/552860378?badge=0&autopause=0&player_id=0&app_id=58479&controls=1&playsinline=0&title=0&byline=0" frameborder="0" allow="autoplay; fullscreen;" allowfullscreen style="position:absolute;top:0;left:0;width:100%;height:100%;" title="PBS1 - Leven uit verlossing - BOEKVERSLAG"></iframe>
          </div>
          <script src="https://player.vimeo.com/api/player.js"></script>
        </body>
      </html>
    `,
  }}
/>

转用expo av方案的可行性分析 #

这个方案完全可行，你可以根据自己的需求选择对应的实现方式：

• 如果你选择自己存储视频：不要直接把视频文件存入关系型数据库，将视频上传到对象存储服务，数据库仅存储视频的元信息（直链地址、封面、标题、时长等），避免数据库体积过大、查询效率降低。250个视频建议转成HLS流格式，expo av对HLS的适配非常成熟，加载速度和播放稳定性都比MP4直链更好。
• 如果你不想承担额外的存储和流量成本：可以直接通过Vimeo的开放接口获取对应视频的直链地址，无需转存到自己的存储服务，直接将直链传给expo av播放即可，既可以用到原生播放的能力，也不需要额外的存储成本。

内容的提问来源于stack exchange，提问作者Sander van Maastricht