2

I am trying to add a web video that has alpha transparency to a website. The video is in .WebM format so no problem there. When checking it out on safari with the latest iOS I realized that Apple doesn't support WebM. After researching it a bit I keep running into dead ends.

I tried converting it into an HEVC encoded video but it still doesn't work. I tried re-exporting the video file from Premier with the format Apple ProRes 4444 XQ .mov and that didn't work either.

My code is just standard HTML5, with the second 2 video sources being both that I tried and could not get to work on Safari.

<video width="600" autoplay loop muted playsinline>
  <source src="movie.webm" type="video/webm">
  <source src="movie_HEVC.mp4" type='video/mp4; codecs="hvc1"'>
  <source src="movie_ProRes4444xq.mov" type="video/quicktime">
</video>

This CSS Tricks article shows a great example of what I am trying to accomplish. It even has a great guide on how to accomplish this task. However, one of the main steps on the guide requires a Mac for it's video encoding ability. I am on Windows. Is there a workaround or any other ways of achieving this?

Thanks, Chase

Chase
  • 21
  • 2

1 Answers1

1

This CSS Tricks article shows a great example of what I am trying to accomplish.

I am on Windows too so I cannot confirm a working Answer, but try...

(1) Test by using only one source for iOS (it must be either MOV or MP4) with "hevc" as the codec.

<video width="600" autoplay loop muted playsinline>
  <source src="movie_HEVC.mov" type='video/quicktime; codecs="hevc"'>
</video>

(2) On Windows, try using FFmpeg to encode Pro-Res 444 video.

ffmpeg -i inputfile.mp4 -c:v prores_ks -profile:v 3 -qscale:v N -vendor apl0 -pix_fmt yuv422p10le -s 800x600 -r 30 output.mov
VC.One
  • 14,790
  • 4
  • 25
  • 57
  • Thanks for the response. After a bit more research it looks like it will need to be encoded as H.265 with Preserved Alpha Transparency. It seems that this can only be done using macOS Catalina or higher due to it requiring hardware acceleration. Looks like I need to find someone with a mac to encode it for me. – Chase May 29 '22 at 00:10
  • Have you ever tried FFmpeg? It might produce what you need and is a [free download](https://github.com/BtbN/FFmpeg-Builds/releases/download/latest/ffmpeg-master-latest-win64-gpl.zip). – VC.One May 30 '22 at 14:24
  • No I have not. I don't know much about command line tools. I downloaded, extracted, and can see the ffmpeg.exe but I shouldn't expect anything to happen when I open it right? I need to open up my cmd prompt and type in the line you added above right? – Chase May 30 '22 at 19:01
  • For quick testing, use a small or short test clip (with simple filename like **myvid1.mp4**) ... **(1)** "copy" the file you want to convert into a test folder like `c:\test` and **(2)** Go to the folder with FFmpeg.exe and in the Explorer address bar just type `cmd` to open the command prompt at FFmpeg. **(3)** Run this command `ffmpeg -i c:\test\myvid1.mp4 myvid2.mp3` which should output an MP3 (audio) extracted from the video, the file will be called **myvid2.mp3**. Let me know if it works okay for you. PS: FFmpeg is clever enough to know you want audio cos the output file name has `.mp3` – VC.One May 30 '22 at 21:01
  • Basically `-i` let's it know your **input**, then `-c:v` sets your preferred **codec : video** and it's related options like `-pix_fmt` which is the pixel format (_eg:_ YUV420 or YUV444). Finally you mention the output filename and press Enter. If output is set to JPG then you get a picture, If set to MP3 you get sound, If set to AVI you get video... very simples and (almost) every known audio/video/image format under the sun is supported. Good luck. – VC.One May 30 '22 at 21:10
  • ffmpeg does not have support for transparent HEVC. – phiresky Aug 09 '23 at 12:13
  • @phiresky I've never needed it myself but others have pulled it off. Check [Example A](https://stackoverflow.com/q/71518987/2057709) and most recently [Example B](https://stackoverflow.com/q/76827110/2057709). PS: I'm on Windows so not sure if it works for them via running FFmpeg on a Mac OS. – VC.One Aug 09 '23 at 13:13
  • i'll correct my previous comment: ffmpeg does not support transparent hevc via x265. it only supports it via hevc_toolbox, which requires specific native hardware and MacOS, making it useless on most OSes / servers etc. – phiresky Aug 11 '23 at 14:07