faulty Transparent Video in iPhone browsers

Question

mksm02 OP

Created Oct ’24

Replies 2

Boosts 0

Participants 2

I need to play a Video with transparent background on our website.

It works perfectly on Windows, Mac & Android (in all browsers). On iPhone however, no matter what Browser, The transparent parts of the video act almost like an "overlay", making everything behind it a lot brighter. This effect gets worse, the higher I set the iPhone screen brightness. This is of course not the behavior I'm looking for.

The Video Element has two listed sources. One .WEBM (VP8 with alpha channel) and one .MP4 (HEVC with alpha channel). I am sure, that something is wrong with the MP4 file, but I don't understand why it works in Safari on Mac, but doesn't on iPhone. Shouldn't they both play the same File?

Here is my workflow:

masking the subject in DaVinci Resolve
exporting as QuickTime - Apple ProRes 444 - "Export Alpha"
using Shutter Encoder (v15.7) to convert the file to H.265 (.mp4)
under "Advanced Features": Hardware acceleration to "OSX VideoToolbox" & check "Enable alpha channel"
also converting the first file to VP8 (.webm) with "Enable alpha channel"

then adding the Videos to the website like this:

<video height="450px" autoplay loop muted playsinline disablepictureinpicture>
  <source 
    src="(url of the mp4)" 
    type='video/mp4; codecs="hvc1"'>
	<source 
    src="(url of the webm)" 
    type="video/webm">
</video>

Here is how it looks on Safari (Mac)

Mac Safari Screenshot.jpg

This is what it looks like in any browser on iPhone

iPhone Screenshot.jpg

I have re-exported, re-converted and re-implemented it multiple times and I just can't get it to work on iPhone. Does anyone have an idea, what the cause could be, or what I can do differently?

Boost

Answer 1

mksm02 OP

Oct ’24

*EDIT 1: The effect gets worse, the LOWER I set the screen brightness, not higher. That's also why it doesn't seem as strong on the screenshot.

*EDIT 2: The Effect is also present on iPad.

0

Answer 2

Engineer OP

Apple

Oct ’24

What colorspace settings are being used in the video file? You can use the Web Inspector in Safari to see what colorspace information was parsed out of the file (In the "Elements" tab of Web Inspector, select the <video> element, and then select the "Media" in the details sidebar). Does it match what your input settings were?

1