Video with alpha channel on iOS WKWebView Export

Not favoritedFavorited Favorited 0 favourites
  • 5 posts
From the Asset Store
Add SubRip (SRT) subtitles to your videos in Construct 3
  • 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.

  • Try Construct 3

    Develop games in your browser. Powerful, performant & highly capable.

    Try Now Construct 3 users don't see these ads
  • Oy yey... Videos with Alpha are a pain in iOS Safari - as you've mentioned, VP9 with alpha is not natively supported and Construct does not ingest .mov... If the edge of your alpha is relatively sharp, like in the case of a green screen etc, you may want to look for a chroma keying shader and output your video as a fake green/blue screen... If it's anything softer, it won't work - you will get spills.

    Here's a plugin from the Addons section - I have not tested it - just did a cursory search:

    construct.net/en/make-games/addons/331/chromakey

    Ah, if you are going to use the grayscale approach as Ashley suggested - profile your game - I noticed the videos may desync when using that method myself.

  • 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.

Jump to:
Active Users
There are 2 visitors browsing this topic (1 users and 1 guests)