LinkedIn iOS内嵌浏览器无法播放inline视频 破坏A-Frame 360 VR视频

绕过内嵌浏览器跳转Safari实现方案 #

LinkedIn iOS端内嵌浏览器基于WKWebView封装，无官方公开的强制跳转API，可通过以下逻辑实现跳转：

• 先通过navigator.userAgent字段判断运行环境：同时匹配LinkedInApp和iOS/iPhone OS字段即可判定为目标环境。
• 检测到目标环境后，将跳转逻辑绑定到用户主动交互事件（如按钮点击）中，通过创建target="_blank"的a标签或调用window.open()触发跳转，可大概率唤起Safari。
• 2023年后更新的LinkedIn iOS版本收紧了跳转权限，上述方案存在一定失败概率，可搭配弹出提示引导用户手动点击右上角「在Safari中打开」入口。

内嵌浏览器内inline播放更优方案 #

该方案兼容性更高，优先推荐使用：

• 给video标签添加所有iOS端inline播放必填属性，示例配置如下：

<video
  id="vr-360-video"
  playsinline
  webkit-playsinline
  x5-playsinline
  muted
  preload="metadata"
  crossorigin="anonymous"
>
  <source src="你的视频资源地址" type="video/mp4">
</video>

• 页面加载完成后，先主动调用一次视频的play()方法再立即执行pause()，提前激活WKWebView的媒体上下文，规避原生全屏播放器触发逻辑。
• 确认A-Frame的<a-videosphere>组件绑定的是上述已配置属性的video元素，避免A-Frame自动生成的video元素缺失inline相关属性。
• 若仍触发强制全屏，可将视频初始宽高设置为小于实际分辨率的数值，加载完成后再通过JS调整为画布尺寸，可绕过部分WKWebView版本的媒体全屏检测规则。

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