Video with alpha channel on iOS WKWebView Export

Currently the two video options to include alpha transparency is either webm vp9 or HVEC H.265 which both work fine on desktop. However, with iOS export WKWebView will not support web vp9. It does support HVEC H.265 with alpha but only with the .mov container. Currently the only option is the .mp4 container which does not work. Is there any reason .mov is not an option for construct?

IIRC .mov is an older variant of .mp4. I didn't think there would be any significant difference in support for them and everything on the modern web would use MP4 instead of MOV. Are you sure you've encoded the video correctly?

AFAIK alpha support for video is pretty inconsistent in browsers at the moment - you might have better luck encoding the alpha channel as a separate greyscale video, and then using it like a mask.

Thanks Ashley. The video is encoded correctly and working fine on safari on both desktop and iOS but as soon as you export to iOS it doesn't, so assume it must be some WKwebview limitation. Just tried the chromakey add-on and it works great. Thanks Funky Koval The edges are soft but I can sharpen this up with Da Vinci Resolve and use a new sharp green screen to tidy it up. The only limitation is you have to turn off WebGPU to run chromakey add-on. Do you think this will this affect performance much?

However, for some reason the performance of all videos is awful when exporting to iOS so again assume this must be wkwebview conflict with the construct platform? The exactly same videos run smoothly when played directly on an iOS device but when played within the construct export they are choppy and screen sometimes even freezes when loading the video source etc throwing the 'wait' timings out of sync.

I made a new basic construct project which pretty much just plays the video and exactly the same thing. I have tried this on a iPhone 16 Pro and also Xcode emulator on a M1 processor MacBook so cannot be a performance issue. I have turned 'worker' mode off and tried multiple AI suggestions but always get choppy low performance video play on iOS export. The same projects are as smooth as butter on desktop. Do you think there is currently some conflict between the construct video object and wkwebview? AI reckons the issue is...

The poor video performance you are seeing inside iOS WKWebView is a known hardware-acceleration bottleneck caused by iOS security policies and Cordova/Capacitor file-protocol handling. When you play a video directly on Safari or a Mac, iOS grants the player direct access to the hardware decoder. However, inside an exported app's WKWebView, the video is loaded via a local file server (file:// or localhost), which bypasses the native video buffering pipeline, forcing the device to fetch, parse, and decode chunks through JavaScript and the isolated WebKit network process.

Any suggestions to make video playback smooth? Is allowsInlineMediaPlayback set to true by default in construct's iOS export? If not could this be an issue? Thanks

Scrap the 'AllowInlineMediaPlayback' suggestion. I just checked the config file on the construct Xcode export and it includes the line

<preference name="AllowInlineMediaPlayback" value="true" />

So that is not the issue! Any other suggestion welcome.

WKWebView has basically the entire Safari browser engine. The main difference for Construct with video playback is to get the video to render inside the canvas it has to do texture upload of the video to WebGL/WebGPU every frame. That can work efficiently and be fully GPU-accelerated, but it seems to be a bit problematic on some platforms. You can bypass it by just using a video tag in a HTML element object, and HTML layers if you need more layering - that will just play the video normally, but with limited features in other ways (e.g. because it's not rendered inside the canvas, it won't respond to layer opacity, effects etc.)

FWIW I think the AI is wrong - Construct mobile exports do not run on the file:// protocol, it uses a custom scheme handler and works much the same as a HTTP server, and I don't think that GPU acceleration is affected by how anything in the networking stack works (I've never heard of such a thing before nor is there any obvious technical rationale to do that). I think it's still the case that AI doesn't say "I don't know", it just makes up plausible sounding guesses.

Thanks Ashley Using a video in a HTML completely fixed the performance of the videos for iOS exports. Is there a simple way of utilising the actions like 'Has Ended' 'IsPlaying' using this method? If not what would be the workaround?

It's ok. Sorted my own question. I used an addEventListener for 'playing' & 'ended' in the js to fire a function. So for optimal performance HTML Video seems to be the best workaround for iOS Exports and use the standard video object for desktop exports.