playing transparent .mov in iPad app

[Emily Toop]

Hey,

I have an animation as a .mov with a transparent background. The idea was to play this mov file over the top of the UIView of the app page in an AVPlayer, so the animation appears to play as part of the page. However, the problem is that the background renders not transparent but black, therefore obscuring the UIView behind, no matter what I set the background value of the AVPlayer view to be.

My searching of the internet has resulted in no solutions to this that does not involve doing some OpenGL magic. Before I start down this route, does anyone have any solutions to this problem?

Cheers

Emily

[Kieran Gutteridge]

Hey Emily 

Have you tried with AVPlayerLayer fairly sure this will handle transparency for you

Kieran

Emily

--
You received this message because you are subscribed to the Google Groups "Brighton iPhone Creators" group.
To post to this group, send email to brighton-iph...@googlegroups.com.
To unsubscribe from this group, send email to brighton-iphone-cr...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/brighton-iphone-creators?hl=en.

[Emily Toop]

That's what I'm doing, but it's still displaying un-transparent.

[Adam Martin]

What have you tried? I'd expect AVPlayerLayer on its own to fail,
since AV hardware generally (on all platforms) forces opaque render
surfaces, but I'd equally expect that setting a layer-mask would work
fine. Is a custom mask what you've been doing that's not working?

I've done a lot recently with complex layermasks, and they seemed to
handle everything I threw at them (although there was a bit of hassle
debugging them). In the end, I got into the habit of having a button
to switch between using the mask as a mask ... and rendering it over
the top of the other layers (so I could visually debug it while
running the app). Helped a lot...

[Emily Toop]

OK, some code:

I've got a UIView TEAnimationPlayerView that is a AVPlayerLayer

@implementation TEAnimationPlayerView

+ (Class)layerClass {

    return [AVPlayerLayer class];

}

- (AVPlayer*)player {

    return [(AVPlayerLayer *)[self layer] player];

}

- (void)setPlayer:(AVPlayer *)player {

    [(AVPlayerLayer *)[self layer] setPlayer:player];

}

@end

Then I'm adding the video .mov and playing

- (void)loadAssetFromFile:sender {    

    NSURL *fileURL = [[NSBundle mainBundle]

                      URLForResource:@"Page1_V02" withExtension:@"mov"];

    AVURLAsset *asset = [AVURLAsset URLAssetWithURL:fileURL options:nil];

    NSString *tracksKey = @"tracks";    

    [asset loadValuesAsynchronouslyForKeys:[NSArray arrayWithObject:tracksKey] completionHandler:

     ^{

         // Completion handler block.

         dispatch_async(dispatch_get_main_queue(),

                        ^{

                            NSError *error = nil;

                            AVKeyValueStatus status = [asset statusOfValueForKey:tracksKey error:&error];

                            

                            if (status == AVKeyValueStatusLoaded) {

                                self.playerItem = [AVPlayerItem playerItemWithAsset:asset];

                                [playerItem addObserver:self forKeyPath:@"status"

                                                options:0 context:&ItemStatusContext];

                                

                                for(AVAssetTrack *track in playerItem.asset.tracks)

                                {

                                    if([track.mediaType isEqualToString:AVMediaTypeAudio])

                                    {

                                        NSLog(@"I need to switch this off %@", track.mediaType);

                                    }

                                }

                                [[NSNotificationCenter defaultCenter] addObserver:self

                                                                         selector:@selector(playerItemDidReachEnd:)

                                                                             name:AVPlayerItemDidPlayToEndTimeNotification

                                                                           object:playerItem];

                                

                                self.player = [AVPlayer playerWithPlayerItem:playerItem];   

                                [playerView setPlayer:player];

                            }

                            else {

                                NSLog(@"The asset's tracks were not loaded:\n%@", [error localizedDescription]);

                            }

                        });

     }];

}

Then initialise the player view and add it to my view

   playerView = [[TEAnimationPlayerView alloc] initWithFrame:CGRectMake(0, 0, 1024, 768)];

    [self.view addSubview:playerView];

    [self loadAssetFromFile:sender];

I've tried setting the background colour of the playerView to [UIColor clearColor], setting the background to the image that I want displayed behind the video and setting the alpha value of the playerView. I've also tried setting the opacity of the underlying AVPlayerLayer.

If I've missed something, I'd love to know what it is :)

[Adam Martin]

On 2 May 2012 23:53, Emily Toop <em...@emilytoop.com> wrote:
>
> I've tried setting the background colour of the playerView to [UIColor
> clearColor], setting the background to the image that I want displayed
> behind the video and setting the alpha value of the playerView. I've also
> tried setting the opacity of the underlying AVPlayerLayer.
>
> If I've missed something, I'd love to know what it is :)
>

I've not tried this, but ... as noted, I'd expect those to fail. Video
libraries normally force every target surface to opaque (destroying
any alpha channel). Latest Mac (Lion) still does this on the desktop,
and last time I checked Windows was generally the same.

I'd expect to use ((CALayer*)playerlayer).mask to set a second layer
that acts as a mask (paint pixels in this layer to white for "shows
through", black for "doesn't show through" - or other way around,
might have that wrong), and then wherever you add your playerLayer,
the attached masking layer should force UIKit to only paint
selectively, and (de facto) give you transparency.

To *get* the transparency, I'd expect to either set it up as a fixed
mask (if you can), or else set some ugly chroma colour (e.g. fuchsia
pink) for the background of your AVPlayerLayer, and create a custom
CALayer subclass (for your mask) that receives the frames IN ADDITION
TO AVPlayerLayer receiving them - only instead of drawing them, it
takes each frame and reads it, swizzling all fuchsia pixels to black,
and everything else to white.

The only problems then would be:

- performance (but most of this is happening in hardware, so should
still be pretty good)
- visual registration / syncrhronization (I've heard of people having
trouble where different sinks for AV* streams got data at slightly
different time offsets. Sounds like a bug to me - that's pretty much
against the whole point of the AVF library - but *shrug* might be a
problem :( )

[Adam Martin]

PS sorry if that's a bit incoherent. I've just spent 12 hours getting
iOS 5 GLKit to draw a single textured, lit, sphere in 3D.

12 hours!!! Would have taken less time to write my own 3D projection
routines in software!

Almost no documentation (still) for GLKit (sob) - but ... IMHO, it's
actually a very good implementation of OpenGL, makes it very easy,
very few lines of code ... once you've reverse-engineered the docs.

(if enough people are interested, I'll volunteer a talk sometime soon :))

So, with that victory ... bed time :)

Adam

[Robert Friston]

Hi emily,

I seemed to remember when I looked into this a while back that the software used to create the movie in the first place was important (the exporting of alpha channels and possibly codecs etc). Sorry I can't be of more help than that, I guess you have already tried everything you can on the one.

Would love to know if you find a solution to this. I have seen example apps that as far as I can tell seem to be doing this, mostly the animated children book categories.

Cheers and good luck

Bob

Sent from my iPad

--

[Chris Ross]

Couple of questions:

- How many of these animations are you wanting to play at any one time?
- Is there a audio track that must play in sync with the animation? (for instance, if something is talking making sure lip sync is correct)

Chris

[Will Johnston]

Hi
My current contract is finishing on the 11 May.
If anyone has anything interesting and ideally local to Brighton\Eastbourne, then please get it touch to discuss.
Thanks,
Will

[Emily Toop]

Surprisingly enough, it's an animated kids book I'm creating :-)

[Emily Toop]

Only 1 video at a time & at this moment, no concurrent sound. There will probably be some sound later but as a separate file to the animation.

[Will Johnston]

Night night Adam.

[Harry Jordan]

Would it be possible to fake transparency by compositing the background into the .mov file ahead of time? (obviously this would only work if the background is constant, something like the texture of a page)

[Robert Friston]

i know someone whi did in fact do this, but they really struggled to get a colour balance that matched. i ended up doing frame by frame animations using png files with transparency. this works great but only practical if short bursts of animation required. would love to know a solution myself as have seen exampkes where it seems certain they have used .mov with transparency.

remember that .mov is just a file wrapper and so the codec the creation software used and exported may well be crucial to this working.

bob

Sent from my iPhone

[Emily Toop]

Further research has led me to this library, AVAnimator. It sounds very much like it might do what I need, but has anyone every heard of it or know anyone who uses it?

http://www.modejong.com/AVAnimator/#ex1