Playing Video on iPhone Cocos2D-X

GMTDev · February 8, 2011, 11:01am

Got this working, thought I’d share:

Can also be found on my not very often updated blog here

OK, first thing you need to know is that Cocos2d doesn’t play videos, it leaves this up to the iOS SDK on the devices. The following code therefore is Obj C which can be inserted into your projects AppController.mm file or you could create a new mm interface file and put it in there.

* Add the “AVFoundation.framework” to your projects Frameworks (located the Frameworks folder, right click, select “Add ~~> Existing Frameworks”).
* Add the “MediaPlayer.framework” to your projects Frameworks.
* You will need a video to play and to add it to the resources in the project. Use your own or download my sample video from here (MiniVideo640x360.m4v)
* Add the following code to your AppController.mm
<pre>
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
MPMoviePlayerViewController **playerViewController=NULL;
int g_iPlayVideoState=0;

PlayVideo:iStateAfterPlay fullscreen:iFullScreen file:strFilennameNoExtension fileExtension:strExtension
{
NSLog;
g_iPlayVideoState = 2;
NSString**url = pathForResource:strFilennameNoExtension ofType:strExtension];
CGRect rScreen;
rScreen.origin.x = 0;
rScreen.origin.y = 0;
rScreen.size.width = 480;
rScreen.size.height = 320;
//rScreen = CGRect::CGRectMake;
if
{
MPMoviePlayerController **player2 =
initWithContentURL:];
addObserver:self
selector:`selector(movieFinishedCallback:)
name:MPMoviePlayerPlaybackDidFinishNotification
object:player2];
```
  //---play partial screen---
  player2.view.frame = rScreen;
  [self addSubview:player2.view];
  player2.shouldAutoplay=TRUE;
  //---play movie---
  [player2 play];
```
}
else
{
playerViewController = [[MPMoviePlayerViewController alloc]
initWithContentURL:[NSURL fileURLWithPath:url]];
```
  [[NSNotificationCenter defaultCenter] 
  addObserver:self
  selector:`selector
```

name:MPMoviePlayerPlaybackDidFinishNotification
object:];
playerViewController.view.frame = rScreen;
cocos2d::CCDirector::sharedDirector~~>purgeCachedData;
// Add the view
EAGLView view = ;
;
;
NSLog;
// Add the view - Use these three lines for Cocos 2D X
window = initWithFrame: bounds]];
;
;
//—play movie—
MPMoviePlayerControllerplayer = ;
player.scalingMode=MPMovieScalingModeAspectFit;
player.shouldAutoplay=TRUE;
;
}
g_iPlayVideoState = 1;
NSLog;
}
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
~~ movieFinishedCallback: aNotification
{
NSLog;
MPMoviePlayerController**player = ;
removeObserver:self name:MPMoviePlayerPlaybackDidFinishNotification object:player];
;
;
g_iPlayVideoState = 0;
NSLog;
}
</pre>
Call the PlayVideo function from with a line like the following. Call it from your AppController’s didFinishLaunchingWithOptions function just before the app.run;
<pre>
;
</pre>
In Appelegate.cpp, find your applicationDidFinishLaunching function and after “pDirector~~>setOpenGLView(m_pMainWnd);” add the line:

glClearColor(0.0f, 0.0f, 0.0f, 1.0f);

The above gl command sets your Cocos2D-X window to transparent wherever it is black, so you can see through it to the video behind.

I have a global variable “g_iPlayVideoState” which you can monitor in your Cocos2D applications code to detect when the video ends, its values are 2=initializing, 1=playing, 0=finished. At the end of play you might want to put the views back to non-transparent with the call “glClearColor(0.0f, 0.0f, 0.0f, 1.0f);

system · February 8, 2011, 6:35pm

So cool! Thx4ur share!

homaica · August 28, 2011, 8:13pm

Hello
I try to get the Video to play in the HelloWorld project, but I only hear the Audio playback and I do not see anything on my emulator/device. Do you have any idea?(I am newbie in Object-C) .

1- Add AVFoundation.framework and MediaPlayer.framework for XCode 4 is little bit different, see the link below.
[[http://stackoverflow.com/questions/3352664/how-to-add-existing-frameworks-in-xcode-4]]

2-Add the video to the Resources :

Copy the video file MiniVideo640x360.m4v to /HelloWorld/Resource/

in XCode 4

Select the Project Navigator
Select the Resources folder
Control+Right Click
Add Files to “HelloWolrd”…
Browse to the video file MiniVideo640x360.m4v

3-I follow as the above steps. etc….
I add glClearColor(0.0f, 0.0f, 0.0f, 1.0f);
after “pDirector->setOpenGLView(&CCEGLView::sharedOpenGLView());

Thanks

GMTDev · August 28, 2011, 11:48pm

Sounds like you are doing the right thing. I wrote this a while ago for an old versions of Cocos2DX & Xcode, will need to look at it to see what’s wrong.

Is the screen just black? Will need to look at it again, maybe in a couple of days.

upflare · October 23, 2011, 7:42pm

Why the CCmenu is disabled in the HelloWorldScene after i playing video success?

GMTDev · October 23, 2011, 11:05pm

Oh yeah, I’ve no idea, that’s new.

I’ve no idea why the CCMenu isn’t getting the touch dispatches, perhaps someone else can have a look; I put a current version up to download here (works with Cocos 0.9.2):
http://www.gmtdev.com/downloads/HelloWorld_MoviePlayer.zip

P.S. I tried doing a:
CCTouchDispatcher::sharedDispatcher()->removeDelegate(this);
CCTouchDispatcher::sharedDispatcher()->addTargetedDelegate(this, 0, true);

… in the OnFrame function after the video ends, but that didn’t work.

upflare · November 17, 2011, 5:08am

can you tell me why CCMenu do not work?I did not solove it

upflare · November 17, 2011, 5:08am

can you tell me why CCMenu do not work?I did not solove it

GMTDev · November 17, 2011, 9:10pm

OK, I took another look and had a bit of luck.

As I suspected before, seems the newer iOS keeps (or newer Cocos2D-X loses) the touch dispatch events even after the movie is finished. A fix was to set the movie window layer to hidden at the end of the movie. movieFinishedCallback now looks like below:-

- (void) movieFinishedCallback:(NSNotification*) aNotification 
{
    NSLog(@"movieFinishedCallback");
    MPMoviePlayerController *player = [aNotification object];
    [[NSNotificationCenter defaultCenter] removeObserver:self name:MPMoviePlayerPlaybackDidFinishNotification object:player];    

    [player.view removeFromSuperview];
    g_iPlayVideoState = 0;
    [window setHidden:true];
    [playerViewController release];

    NSLog(@"movieFinishedCallback done");
}

Full code: http://www.gmtdev.com/downloads/HelloWorld_MoviePlayer.zip

apadure · December 4, 2011, 2:06am

Hi and thanks for sharing this !
I’m new to cocos2d but so far it seams to be a really great community

I’ve tried to run the HelloWorld_MoviePlayer project Gav T has uploaded on win32 but I’m having 2 linking errors

1>AppDelegate.obj : error LNK2001: unresolved external symbol impglClearColor@16
1>HelloWorldScene.obj : error LNK2001: unresolved external symbol “int g_iPlayVideoState” (?g_iPlayVideoState@@3HA)

Maybe this is due to the fact that I did not Add the “AVFoundation.framework” and “MediaPlayer.framework” or the “equivalent” to the project but I don’t know how to do that on win32 with visual studio 2008 ( or what to add ).
If I understood correctly AVFoundation.framework and MediaPlayer.framework are from iOS SDK, so how about Android and win32 ?
Ideas of how to make it work on win32 and Android ?

Thank you!

GMTDev · December 4, 2011, 9:09am

Congratulations on choosing Cocos2d-x! It’s quite powerful and has helped me progress with my game, but one thing it doesn’t do is play videos. Hence, I wrote the above to play videos but it is only for iOS devices (iPhone, iPad, etc). You’ll notice the code is in a “.mm” file which is the ObjC file (iOS SDK).

So if you want to play videos on Win32 you will need to write the code for that platform yourself, there is plenty of source code and tutorials on the CodeProject here: http://www.codeproject.com/kb/audio-video/

Same goes for Android.

apadure · December 4, 2011, 9:15am

OK, got the idea.
Thanks

dmitry · February 6, 2012, 12:19am

Has anybody got a video playing for Android?

apadure · February 7, 2012, 3:56pm

Hi Dmitry,

I have not done it ( yet ) because I’ve concentrated on different parts of the projects.
However I’m still interested to see an example if someone has done it in the meanwhile.

Most certainly to have Video on Android will have to make a call to Android’s Java SDK throw JNI.
http://www.cocos2d-x.org/projects/cocos2d-x/wiki/How_to_use_jni

Happy programming,
Adrian

dmitry · February 9, 2012, 6:04pm

I’ve got it working. But still having a few issues and need to do a bit of refactoring. Will post it here a bit later

apadure · February 12, 2012, 11:50am

That is great news Dmitry !

nu1 · February 14, 2012, 1:25pm

@ Gav T

Thanks for this tutorial… it is really grade!

But i got a problem when try to use it. This code setup a video play as soon as application starts right? how do i change this to play a video after sometime in the application?

thank you

dmitry · February 22, 2012, 11:26pm

I’ve just committed source code for playing video in iOS and Android - https://github.com/dimat/cocos2d-x/commit/6bcd45d9f0f5f45ca83292ac5abb7ab2ed198e6f

@Gav T, I hope you don’t mind using your snippets in it

GMTDev · February 23, 2012, 1:03am

Cool.

Use any snips you like!

apadure · February 23, 2012, 7:54am

Thanks Dmitry !
I’m at my daily work now but I can’t wait to go home, have a look and give it a try

Cheers !