Blazor WASM/Server cannot read video with transparent channel on IOS (?)

Question

When I try to copy this code snippet:

https://codepen.io/mortenjust/pen/BaLrjzm

<video width="600" height="100%" autoplay loop muted playsinline>
    <source src="https://rotato.netlify.app/alpha-demo/movie-hevc.mov" type='video/mp4; codecs="hvc1"'>
    <source src="https://rotato.netlify.app/alpha-demo/movie-webm.webm" type="video/webm">  
</video>

to the empty blazor wasm application or empty blazor server application, video doesn't work on all IOS (Safari/Mozzila tested). When I use other OS with Chrome, Firefox it works. When I use Web App it works even on IOS/Safari.

But it doesn't work in Blazor...

It seems like Blazor WASM/Server cannot read video with transparent channel on IOS.

Is there any workaround?

Thank you for your answers.

NET version: NET 7.0

What are we tried?

IOS-Safari/Blazor - doesn't work

IOS-Firefox/Blazor - doesn't work

IOS-Safari/WebApp - works

Win-Opera,Chrome,Firefox/Blazor - works

Android-Chrome,Firefox,Opera/Blazor - works

Answer 1

Blazor is not playing automatically on IOS. Yout must help him by JS.

<video id="video" width="600" height="100%" autoplay loop muted playsinline>
    <source src="https://rotato.netlify.app/alpha-demo/movie-hevc.mov" type='video/mp4; codecs="hvc1"'>
    <source src="https://rotato.netlify.app/alpha-demo/movie-webm.webm" type="video/webm">  
</video>

JS:

function Play() {
    var bgvideo = document.getElementById("video");
    bgvideo.muted = true;
    bgvideo.play();
}