Answers.Body: <p>Transparent video on the web is possible, but it's going to only work for users with modern browsers.  You'll need to export in two different codecs - one for Chrome users, one for Safari.</p>
  <p>From <a href="https://www.rotato.app/read/transparent-videos-for-the-web" rel="nofollow noreferrer">this site</a>:</p>
  <blockquote>
  <p>Safari supports HEVC with alpha, Chrome does not.
  Chrome supports VP9 with alpha, Safari does not.</p>
  </blockquote>
  <p>You need to export an HEVC with alpha channel for Safari.</p>
  <p>You need a .webm VP9 codec with alpha for Chrome.</p>
  <p>The animation codec you've exported at is not designed for web publishing.  It's a lossless very large codec designed for editing or archiving your finished project before you use it to make a smaller lossy version to go on the web.</p>
  <p>This is how to make the webm using ffmpeg</p>
  <pre><code>ffmpeg -i &quot;movie-prores.mov&quot; -c:v libvpx-vp9 movie-webm.webm
  </code></pre>
  <p>I would recommend also exporting a &quot;fallback version&quot; for browsers that can't cope with transparent video (as a normal h264 mp4 or webm).</p>
  
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2021-05-28T17:46:33.767Z
Answers.Text: Thank you so much for your help! I will try this!
Answers.UserDisplayName: Shredde
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2021-05-28T18:26:48.353Z
Answers.Text: You’re welcome- please mark it as an answer if it helps!
Answers.UserDisplayName: tomh
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2021-05-28T08:43:14.520Z
Answers.LastActivityDate: 2021-05-28T08:43:14.520Z
Answers.UserDisplayName: tomh
Answers.Body: <p>Probably a good option, depending on the animation, is a CSS or JavaScript animation of a PNG sequence. This works well for 360° animations.</p>
  <p><a href="https://www.google.com/search?client=firefox-b-d&amp;q=360+javascript+animation" rel="nofollow noreferrer">https://www.google.com/search?client=firefox-b-d&amp;q=360+javascript+animation</a></p>
  
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2021-06-16T09:19:54.050Z
Answers.Text: Yes - this is a solution a lot of newspapers use for their "scrollytelling" animations.  Works better for shorter diagramatic animations than photographic work due to file sizes.
Answers.UserDisplayName: tomh
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2021-05-30T21:52:47.227Z
Answers.LastActivityDate: 2021-05-30T21:52:47.227Z
Answers.UserDisplayName: Rafael
Body: <p>A client asked me to do an animated product visualization in 3D and then render out the animation in 4K with a transparent background to put on their website. The animation is done but if I want to export it without background I realized that Quicktime is the only option. The 4-sec video then becomes 1,8GB in size! Is there any way around this or do I have to tell them that we can't go with 4K? or can I compress it or use some other format? The animation is also choppy in the video exported without background. When I render out an MP4 with the background it runs smoothly.</p>
  
Tags: <file-formats><export>
Title: Video with transparent background file-size issue
UserDisplayName: Shredde
ThreadText: # Video with transparent background file-size issue
  
  (Asked by: username_0 on 2021-05-26)
  
  A client asked me to do an animated product visualization in 3D and then render out the animation in 4K with a transparent background to put on their website. The animation is done but if I want to export it without background I realized that Quicktime is the only option. The 4-sec video then becomes 1,8GB in size! Is there any way around this or do I have to tell them that we can't go with 4K? or can I compress it or use some other format? The animation is also choppy in the video exported without background. When I render out an MP4 with the background it runs smoothly.
  
  **Tags:** file-formats, export
  
  
  ---
  
  ## 2 answers
  
  ### Answer by username_1 on 2021-05-28. Score: 0 | Accepted answer
  
  Transparent video on the web is possible, but it's going to only work for users with modern browsers. You'll need to export in two different codecs - one for Chrome users, one for Safari.
  
  From [this site](https://www.rotato.app/read/transparent-videos-for-the-web):
  
  > Safari supports HEVC with alpha, Chrome does not.
  > Chrome supports VP9 with alpha, Safari does not.
  
  You need to export an HEVC with alpha channel for Safari.
  
  You need a .webm VP9 codec with alpha for Chrome.
  
  The animation codec you've exported at is not designed for web publishing. It's a lossless very large codec designed for editing or archiving your finished project before you use it to make a smaller lossy version to go on the web.
  
  This is how to make the webm using ffmpeg
  
  ```
  ffmpeg -i "movie-prores.mov" -c:v libvpx-vp9 movie-webm.webm
  
  ```
  
  I would recommend also exporting a "fallback version" for browsers that can't cope with transparent video (as a normal h264 mp4 or webm).
  
  > **Comments:**
  > **username_0**: Thank you so much for your help! I will try this!  
  > **username_1**: You’re welcome- please mark it as an answer if it helps!  
  
  ---
  
  ### Answer by username_2 on 2021-05-30. Score: 1
  
  Probably a good option, depending on the animation, is a CSS or JavaScript animation of a PNG sequence. This works well for 360° animations.
  
  <https://www.google.com/search?client=firefox-b-d&q=360+javascript+animation>
  
  > **Comments:**
  > **username_1**: Yes - this is a solution a lot of newspapers use for their "scrollytelling" animations.  Works better for shorter diagramatic animations than photographic work due to file sizes.  
  
  ---
  
  