How to get a web video with alpha transparency to play in mobile safari?

user_19217871 0
Viewed 518

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

html5-video mobile-safari safari encoding html
1 Answers

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