Enhancement request for VideoPlayer

For an iOS only project I built in Cocos v.2.2 I implemented video playback, and now that v.3.2 has experimental VideoPlayer, I thought I’d give it a quick look to see if it will meet my needs, and at this point is does not.
I use videos as an app intro or transitions between scene, thus I do not want the user to be able to directly interact with the video player, and only affect it through any UI I provide, like in the case of an intro video I want to add a “skip” button on top of (z not y) the video.
To get this to work, in my implementation, I put the video player behind the OpenGL view. It looks like the experimental VideoPlayer sits on top of the OpenGL layer, which means that it is not possible to have UI on top of the player.
To accomplish this, I did the following. In AppController.mm, instead of:

_viewController = [[RootViewController alloc] initWithNibName:nil bundle:nil];
_viewController.wantsFullScreenLayout = YES;
_viewController.view = eaglView;

I have:

_viewController = [[RootViewController alloc] initWithNibName:nil bundle:nil];
_viewController.wantsFullScreenLayout = YES;
eaglView.autoresizingMask = UIViewAutoresizingFlexibleLeftMargin |
UIViewAutoresizingFlexibleRightMargin |
UIViewAutoresizingFlexibleTopMargin |
UIViewAutoresizingFlexibleBottomMargin |
UIViewAutoresizingFlexibleWidth |
UIViewAutoresizingFlexibleHeight;
_viewController.view.autoresizesSubviews = YES;
_viewController.view.frame = eaglView.frame;
[_viewController.view addSubview:eaglView];
_viewController.view.backgroundColor = [UIColor clearColor];
eaglView.backgroundColor = [UIColor clearColor];

Thus making the GLView a subview of the rootViewController, not it’s main view. Then, when adding the player to the view, instead of (UIVideoPlayerIOS.mm):

[eaglview addSubview:self.moviePlayer.view];

I have:

[[eaglview superview] insertSubview:self.moviePlayer.view atIndex:0];
glClearColor(0, 0, 0, 0);  // required to see the video behind the GLView

Thus inserting the videoplayer view behind the GLView, so the GLView can supply the UI. Additionally, I change controlStyle to none:

    self.moviePlayer.controlStyle = MPMovieControlStyleNone;

I have no idea how to do this on the Android side, or if it is even possible, but I would love to see these integrated in for v3.3. If nothing else, these changes can be used by other developers who want to produce the same results as I wanted.

3 Likes

In case anyone is running in to the error while trying to compile the Android version to use VideoPlayer:

jni/…/…/cocos2d/cocos/./ui/UIVideoPlayer.h:48: error: undefined reference to ‘cocos2d::experimental::ui::VideoPlayer::VideoPlayer()’

I had to uncomment the 2 CocoStudio lines from proj.android/jni/Android.mk

I got same problem, which 2 lines are need to be uncomment it? can you help me with this!!!

Hope you figured it out by now but in case the lines are:

LOCAL_WHOLE_STATIC_LIBRARIES += cocostudio_static
$(call import-module,editor-support/cocostudio)
1 Like

To put the videoView behind the GL layer, I changed the _createVideoView method of Cocos2dxVideoHelper.java as follows:

private void _createVideoView(int index) {
	Log.i(TAG, "_createVideoView > " +index);

	Cocos2dxVideoView videoView = new Cocos2dxVideoView(mActivity,index);
	sVideoViews.put(index, videoView);
	FrameLayout.LayoutParams lParams = new FrameLayout.LayoutParams(
			FrameLayout.LayoutParams.WRAP_CONTENT,
			FrameLayout.LayoutParams.WRAP_CONTENT);
	videoView.setZOrderOnTop(false);
	mLayout.addView(videoView, 0, lParams);
	videoView.setOnCompletionListener(videoEventListener);
}

And to UIVideoPlayerAndroid.cpp’s method createVideoWidgetJNI(), I added

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

There were a few other changes (I’d have to look them up) but overall it works like the iOS version does. The problem is that when the app goes to the background and returns, I restart the video with a play() call, but now the videoView is in front of the GL layer. I have no idea how to get the video view to stay behind the GL view when returning from the background, I even tried removing and restarting the video in applicationWillEnterForeground() but it still ends up on top. I also tried setting

this.mGLSurfaceView.setZOrderMediaOverlay(true);

in init() of Cocos2dxActivity.java but to no avail. Any other suggestions?

1 Like

Thank you~~
It’s very helpful…

Please help, Android solution not work.

The webview is not visible if I implement the above code. If I changed the index from 0 to 1 then again it comes on top.

Please help what should I do?

Thanks,
Gunjan