html5 target with -Ddom

#1

Hi, I was testing some HTML5 output and playing around with the “-Ddom” option. I didn’t find much info about it and there are some things I would like to know:

  1. What are performance implications while using it instead of the default canvas output?

  2. Is there a way to consider this -Ddom argument on conditional compilation, like having a code block for Ddom and another for canvas?

#2

You can use dom, canvas and webgl in conditional compilation, if you need there’s also html5.

#if html5
  #if dom
  // dom
  #elseif canvas
  // canvas
  #elsel
  // webgl
  #end
#end
1 Like
#3

I usually encourage developers not to base code around defines like #if webgl, as a WebGL project may need to roll back to canvas if WebGL is not supported on the user’s browser.

However, DOM, perhaps, is a bit of an exception to this. Really, it’s about what you’re building. DOM means every Bitmap is an Image or Canvas (depending on whether you edit your BitmapData) on the DOM, instead of blitting to one canvas. If your content does not change often, or depending on what it is, DOM might be MUCH better, or much worse.

Trivia, though, using bitmapData.draw on DOM is similar to using the full canvas renderer, so you can pick-and-choose what you blit, and what is passively rendered on the DOM. It’s an interesting target, suitable for applications and many types of games, but not action-games where every pixel changes each frame.

Worth playing with

#4

Interesting… I’m playing around with DOM with some interesting results (and bugs as well). Video playback seems much nicer using DOM than standard canvas, but setting TextField size (width or height) doesn’t seem to work properly.

WebGL is nice too, but I can’t make video work on it : I just get the audio output. I was also wondering if on WebGL we could have the 3D transformations (like rotations and setting the Z axis position) like we have on Flash display…

#5

Try setting scaleX and scaleY instead. Last I checked, width and height don’t work properly on the HTML5 target.

#6

Could someone make a short list of DisplayObjects and basic properties that don’t appear to work as expected under certain renderer types? (GL, canvas, DOM)

It seems there may be a couple cases we still need to handle here with TextField and Video, thanks :slight_smile:

#7

Challenge accepted :wink:
I’m checking there properties anyway for my current project. I’ll post the problems I here at the forums.

#8

I’ve put the code I’m working on github for testing:

Here is a direct link to a file I’m keeping withe the issues I found on OpenFL:

#9

@chokito You can get the current time and the duration of a video in html5 like that :

#if flash
meta.onMetaData = function(meta:Object):Void
{
	duration = meta.duration;
}
#else
meta.onPlayStatus = function(meta:Object):Void
{
	handleVideoStatus(meta.code, meta);
}
#end
ns.client = meta;
private function handleVideoStatus(status:String, ?meta:Object):Void
	{
		switch(status)
		{
			case "NetStream.Play.canplay"://html5
				duration = meta.duration;
			case "NetStream.Play.timeupdate"://html5
				trace(meta.position);			
		}
	}

So in flash you use meta.onMetaData + ns.addEventListener(NetStatusEvent.NET_STATUS, onStatus);
but in html5 you use only meta.onPlayStatus = function(meta:Object):Void{} to control the video.

#10

Thank you, @loudo! Using the playstatus works fine to get the info I need on HTML5 :wink: I updated the issues file with this info.

Do you know how to set the current playback time on a playing video on HTML5? O Flash we just need to call NetStream.seek(time), but this does’t seem to work on HTML5… As a workaround I hacked openfl.media.Video class, adding:

public function setCurrentTime(value:Int):Void {
    if (this.__stream != null) {
        __stream.__video.currentTime = value;
    }
}