iOS 上的透明 HTML 视频仅适用于 Safari，不适用于 Chrome 和其他浏览器

Question

我正在创建一个简单的 HTML 页面，其中包含一个位于其他元素之上的透明视频，用于用户交互。在 Windows 和 Android 上一切正常。但苹果在这方面给了我一个艰难的时间。我设法使用此 tutorial 在 Safari 上运行视频。

在 chrome 上，视频不可见，但我仍然可以点击/点击它。该页面现在正在开发中 here。这里的目标是，在页面加载后，背景视频开始播放，透明显示在 BG 视频上。用户点击透明后，显示页面内容。

视频是这样加载的：

<div class="logo" onclick="playLogo()">
    <video id="logo" muted playsinline height="200px" width="100%"></video>
</div>

<script>
    const player = document.getElementById('logo');
    player.src = supportsHEVCAlpha() ? 'logo_new.mov' : 'logo.webm';

    function supportsHEVCAlpha() {
      const navigator = window.navigator;
      const ua = navigator.userAgent.toLowerCase()
      const hasMediaCapabilities = !!(navigator.mediaCapabilities && navigator.mediaCapabilities.decodingInfo)
      const isSafari = ((ua.indexOf('safari') != -1) && (!(ua.indexOf('chrome')!= -1) && (ua.indexOf('version/')!= -1)))
      return isSafari && hasMediaCapabilities
    }
</script>

还有一些其他的js代码，用于管理一些自动化和动画。

有没有办法在 iOS 上的其他浏览器上运行视频？ 我试图找到一种在safari上默认打开页面的方法，但没有找到。

感谢您的帮助。