2

portfolio57333.herokuapp.com

Hello,

I just created this page and was trying out something new. I render an animation in blender with a transparent background as a .webm and it displays perfectly fine on every browser but safari. When I tried the render it with quicktime and the video codec as QT rle / Qt Animation for safari, I get a .mov file which wont display at all. Sometimes it would display but it would have a black background instead of transparent on safari.

safari is also hard for me to test on.

<div class="vid-container">
        <video id="main-vid" playsinline muted loop autoplay  poster="images/earthholo.png">
            <source src="video/0001-0250.mov" type='video/mov'>
            <source src="video/0001-0250.mov" type='video/quicktime'>
            <source src="video/0001-0250.webm" type='video/webm'>
            <source src="video/0001-0250.webm" type='video/quicktime'>
        </video>
    </div>

I tried different variations but got no success in safari.

I have no JavaScript for this and the CSS is only controlling the position and size.

Andrew Monis
  • 45
  • 5
  • 1
    MOV is `type='video/quicktime'` and WebM is `type='video/webm'` ... For transparency in Safari the MOV must contain H.265 codec. See if [this article](https://supergeekery.com/blog/transparent-video-in-chrome-edge-firefox-and-safari-circa-2022) helps you in some way. – VC.One Jul 17 '22 at 19:57

0 Answers0