Clockwork Chilli - Wade Game Engine Forums

cap April 9th, 2014

Hi,

(This is more like a javascript question - feel free to move/remove.)

Because WADE does not support movies, I am trying to embed a youtube video right ontop of the app. So far I am close to managing show/hide the html marker by callback listening to a mouse click flag on an app button, then quiting the app function (so as to be able to push the embedded youtube play button) -simulateneously replacing the app background with a mock-up. The problem is... I cannot go back to the app with an app button.

Can you think of a better, more WADE-native of doing this? Maybe there is a natural wade system call or something? I imagine a very very naive way to do this would be to "remove mouse listening events from the app in a certain area".

Thanks!

CA

hermes April 9th, 2014

The latest version of Wade has introduced two new functions: wade.stopInputEvents and wade.restartInputEvents.

maybe you could use those to make sure that wade doesn't interfere with your youtube video while it's open?

I tried playing html5 video directly in a canvas once (Gio explained how to do it, I can't remember exactly now). It worked, but not on iPhone.

Gio April 9th, 2014

Hi cap

What hermes suggested above is quite possibly the easiest workaround.

There is also another (somewhat more complex) way: if you don't use a youtube video but a video that you can host yourself and access directly (you'll need both H264 and MP4 formats for maximum compatibility), then you could create an HTML5 video object (without adding it to the DOM), and play it. Then you can create a sprite that uses this video as its source image, making sure that the sprite is always drawn for every frame.

var video = document.createElement('video')v.autoplay = true;v.src = 'myVideo.ogg'; // or 'myVideo.mp4'var sprite = new Sprite(video);sprite.originalDraw = sprite.draw;sprite.setDrawFunction(function(context){    this.originalDraw();    this.setDirtyArea();});

But it will only work on some platforms - making it work on all platforms is difficult / impossible.

To elaborate: WADE doesn't support movies because loading and playing them back on iOS is very problematic - it only works in specific conditions (the user has to click to initiate the download of a video, it just isn't possible to do it automatically).

However, if there is a genuine need for video features, we could add VideoSprites to WADE - it wouldn't be difficult, but then it wouldn't work on iOS.

cap April 10th, 2014

Ok thanks a lot! The new WADE feature may come in useful. For now, I am just setting an app window size and making the youtube play button go outside the app canvas. primitive but effective :).

cap April 10th, 2014

Update: Actually a normal jquery function acting on the iframe div's does the trick: Thanks!

var showVid = 0

function toggle(showVid){
    if (showVid == 1)
    {
   $('#videoDiv').css("display","inline-block");
    }
    else
    {
   $('#videoDiv').css("display","none");
    }
};