Videos and CocoonJS?

[CaueCR]

Hello! Sorry to bother again with my questions.

I'm trying to apply an video before the game starts, and a video after the game ends. But when the preload function creates them, they're already displayed and the game starts at the same time. The game should start only after the first video ends.

And I've been having another problem that you guys already solved but I couldn't find the answer:

How do I put Phaser on CocoonJS? I've been beaten a lot of times by it, so if anyone can help I would appreciate! The app CocoonJS generates never starts, there's only a black screen always. Not even their logo appears.

Thanks for your patience!
 

[CaueCR]

Well, the video part I've already handled by myself. Now I only need help regarding CocoonJS.

Can anyone help me or am I going to stay in the dark for more three days?

Thanks again for the attention.

[Milton]

Use the launcher and check the debug (or console, can't remember) tab. That usually tells you what's wrong...

[CaueCR]

Thanks! I'll try that out!

I'll post my feedback here, thanks again!

[CaueCR]

Well, launcher freezes too. The custom launcher freezed, the Play Store launcher freezed. There's definitely something wrong. All this compatibility problems started after CocoonJS 1.4.7 version came out. Now even the ImpactJS games I made and ported with Cocoon doesn't work anymore.

[CaueCR]

Nobody is going to help me? I've seen a lot of Phaser games published with CocoonJS but nobody is saying anything. Is it some market secret?

 

I thought this forum was made to help developers. Not to mislead them.

 

I hope anyone can help me, I'm really needing the help.

Sincerely,
Cauê.

[spartanatreyu]

Whoa, calm down there buddy.

If both phaser and impactjs games aren't working then the most likely culprit is cocoonjs. You might want to have a look at their forums and see if anyone else is having the same problem.

[Videlais]

@CaueCR: I've been working to submit patches for Phaser with CocoonJS for several weeks now. I've been updating this list as I've gotten documentation of issues and proof of different ways to solve things. Some functionality is still not working correctly. However, many issues have been patched in the development build of Phaser.

 

I personally haven't tried working with videos and CocoonJS yet. From past experience with HTML5 video, though, I do know encoding formats can often be to blame for errors. Depending on the platform (Android, iOS, etc), different video and audio formats are needed. This is true across browsers too -- Chrome, Firefox, and Internet Explorer all support different video and audio formats.

 

Phaser also doesn't have HTML5 video support at the moment, and neither does CocoonJS -- you cannot "createElement('video')" currently. So, that might be a major obstacle. However, although I haven't tried them personally, there may be ways to patch video support back in via another JavaScript library, should you be interested. (It's possible Broadway.js might work, but I haven't tried it.)

 

Many of us are not hiding things from people. We simply don't know the answers ourselves.

[CaueCR]

Thanks a lot guys! I was starting to get desperate here. I believe you're right spartanatreyu, and the people at CocoonJS couldn't give me answers at the time I talked with them, it is a strange issue indeed. I'll try asking them again about this problem, thanks for your time!

And about the video issue, if you're interested Videlais I've made video work with Phaser, but it involved some DOM weight-lifting (and the script tag must be made after the body tag for the video to work). And thank you very much for the list! That's something that will help me a lot, thanks!

And sorry for the angry writing, I was getting a wrong impression because of the time this post was up, and no one (from the 385 viewers) came here at least to say "Sorry, but we don't know that too". At least now I know the problems aren't happening only with me.

 

Thanks again!


 

[Videlais]

@CaueCR: Sure. I'd be interested in some code to get video working. Like I wrote, I haven't tried it yet myself. If you can post it using the code highlighter here or supply a link, I'll take a look. I haven't seen or heard of other people asking about video, but I'd be happy to add it to that list too.

[CaueCR]

Alright then! What I did was take advantage of HTML's video tag trough DOM manipulation. When I need to use a video, I simply append it in front of the canvas. When the video ends, I remove it and start the game. After the game finishes I append the video again. That is necessary because the video tag seems to always stay on top of the canvas, so even if I append them in the correct order, the video stays up.

//The video tags creationv2 = document.createElement("video");if(browserCheck.indexOf('OPR') != -1){    v2.src = "media/videos/teste2.webm";}else{    v2.src = "media/videos/teste2.mp4";}v2.width = 1024;v2.height = 768;v2.id = 'video';v2.loop = false;v2.autoplay = false;v2.controls =true;v = document.createElement("video");if(browserCheck.indexOf('OPR') != -1){    v.src = "media/videos/teste.webm";}else{    v.src = "media/videos/teste.mp4";}v.width = 1024;v.height = 768;v.id = 'video';v.loop = false;v.autoplay = false;v.controls = true;//Later when I need to use the video I set one flag to false, append the video, and set the flag back to true. That way the video is appended only once (after all, you'll have to append the video in the update section of Phaser)if(!v_apply){    document.body.appendChild(v);    v.play();    v_apply = true;}//When the video ends, I read the .ended property and remove the video from the bodyif(v.ended){                if(!v_remove)    {        document.body.removeChild(v);        v_remove = true;    }}

There's one little trick though, the script must be under the body tag. At least that way I've made the video run on intel XDK, BUT the controls property must be set to true. If it is set to true, the video won't load at first, but when you tap the play button it will load.

I hope this helps!

[CaueCR]

OBS.: browserCheck = navigator.userAgent;

I forgot to add this line xD

[Videlais]

@CaueCR: Sorry for the extended delay in replying back. I saw your code right away -- thanks for posting it -- but wanted to test some things myself. I also had to wait to hear back from an expert I know on this.

 

The answer to your original question is quite complicated, it turns out. To get videos working in CocoonJS in its 'accelerated' mode, you need to use the "App_ForWebView" extension to create a WebView instance on top of 'accelerated' one. From there, you need to test which formats the particular platform can use, load the correct file, and then signal to the 'accelerated' view that it is ready. Maintaining a bridge of sorts across the two different views, a video can be played in one, the WebView, and controlled from another.

 

It's not at all a clean approach and definitely much more trouble than it is worth, believe me. And, to be honest, for those wanting video support and who don't plan to the use the 'accelerated' mode, the WebView mode should work fine on most platforms anyway. There's little need to mix the two for this.

 

Oh, and I should probably note that, outside of CocoonJS' 'accelerated' mode, most browsers support the video element as an argument to the canvas drawImage function. Assuming the element exists and its corresponding video has already been loaded by the browser, you can do the following:

ctx.drawImage(videoElement, 0, 0);

It will draw the current frame of the video element to the canvas and, when run via its own play function, allow people to play the audio from the file while also showing the video on the canvas as if it was any other image.

[CaueCR]

The video on CocoonJS problem was really a nuisance, but as you said yourself, it's not worth the trouble xD

I started adapting my games to get those videos off them. The funny part of the browser support, is that I was able to make it work on all browsers I've tested, even in android 4.0.1's native browser.

The catch seems to be the autoplay, video on mobile browser need a user input that works as some kind of "authorization" for the video to play. So, when I disable the autoplay attribute and enable the controls attribute, the play button appears and the video plays when I click it.

All that works with the code I posted above. And thanks for the .drawImage tip! I'll try that here!

Thanks for your time!