Fullscreen HD video with OpenLaszlo 4.2 and the SWF9 runtime

Update: I’ve added the functionality to the OpenLaszlo platform with the 4.4 release, here's a short example of how to do full screen with OpenLaszlo now!

With the release of the brand new OpenLaszlo 4.2 compiler it has become a lot easier to extend the platform with runtime-specific code. I did some work on the video components for the new version last year and always wanted to come up with a demo of an OpenLaszlo app utilizing the fullscreen display mode of the Flash player, playing HD video. Now I finally found the time to do that, and here’s the result: a simple OpenLaszlo app showing an HD video, and click the “Toggle Fullscreen” button to switch to the fullscreen display mode (it’s a 20mb FLV file, so can take a few seconds to load).

<!-- * X_LZ_COPYRIGHT_BEGIN ***************************************************
* Copyright 2001-2008 Laszlo Systems, Inc.  All Rights Reserved.              *
* Use is subject to license terms.                                            *
* X_LZ_COPYRIGHT_END ****************************************************** -->
<class name="fullscreentoggle" extends="node">

    <attribute name="displaystate" type="string" value="normal"/>

    <method name="init">
     <![CDATA[
     if ($swf8) {
        Stage.scaleMode="noScale";
        Stage.align = "TL";
     } if ($dhtml) {
        Debug.error("DHTML doesn't support fullscreen display mode! Only available for SWF8/9/10");
     }
     ]]>
    </method>

    <switch>
	    <when runtime="swf9">
	        <passthrough>
                 import flash.display.Stage;
	             import flash.display.StageDisplayState;
	        </passthrough>

	        <method name="toggleFullScreen">
	          <![CDATA[
	          #passthrough  {
                var stage:Stage = canvas.sprite.stage;
	            if (stage.displayState == StageDisplayState.NORMAL) {
                    try {
                        stage.displayState=StageDisplayState.FULL_SCREEN;
                    } catch (error:SecurityError) {
                        Debug.error(error.message);
                        Debug.error('Check your SWF embed code for missing param tag ' +
                                    '<param name="allowFullScreen" value="true" /> inside the <object> tag or n' +
                                    'missing attribute allowFullScreen="true" in <embed> tag');
                    }
                } else {
	                stage.displayState=StageDisplayState.NORMAL;
	            }
                this.setAttribute("displaystate", stage.displayState);
	         }#
	         ]]>
	        </method>
	    </when>
	    <when runtime="swf8">
            <method name="toggleFullScreen">
              <![CDATA[
                  if(Stage["displayState"]=="normal"){
                    Stage["displayState"]="fullScreen";
                  }else{
                    Stage["displayState"]="normal";
                  }
                  this.setAttribute("displaystate", Stage["displayState"]);
             ]]>
            </method>
	    </when>
    </switch>

</class>

The usage of the fullscreentoggle component is really simple. Just add it to your application, and call the toggleFullScreen() method of the instance created, e.g.:

<fullscreentoggle id="fsToggle" />
<button text="Toggle Fullscreen" onclick="fsToggle.toggleFullScreen()" />

Thanks to Henry Minsky, Tucker Withington and Max Carlson for answering the many questions I had to understand the details of the SWF9 runtime and the LFC classes. And of course kudos to the whole OpenLaszlo team for the incredible work you did in 2008!

The OpenLaszlo team created one of the most advanced and powerful compiler for generating RIAs in the market: A JavaScript2 to ActionScript2, ActionScript3 and JavaScript 1.5 compiler. ActionScrip3/SWF9 support gives any AS3 or Flex developer the chance to re-use parts of their code with OpenLaszlo. It’s even possible now to use SWC files within OpenLaszlo, for a detailed description on how to do that take a look at Antun Karlovac’s example of AS3 based GoogleMaps integration into OpenLaszlo.

Tagged as: flash, fullscreen, OpenLaszlo, swf9, video