javascript - Transparent HTML video on iOS works only in Safari, not Chrome and other browsers

Question

I am creating a simple HTML page with a transparent video that is above other elements and is there for user interaction. Everything works fine on Windows and Android. But Apple gives mi a hard time here. I managed to run the video on Safari using this tutorial.

On chrome, the video is not visible, but I can still click/tap on it. The page is now in development here. The goal here is, that after the page is loaded, the background video starts playing, and the transparent is shown over the BG video. After the user clicks on the transparent one, the page content is shown.

Video is loaded like this:

<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>

There is some other js code, that is for managing some automation and animations.

Is there a way how to run the video on other browsers on iOS? I tried to find a way to open the page on safari by default, but I did not find it.

Thank you for any help.

question from:https://stackoverflow.com/questions/65861170/transparent-html-video-on-ios-works-only-in-safari-not-chrome-and-other-browser

Answer 1

Waitting for answers