Question

Question

I have video player chrome buttons designed with HTML/CSS. The full screen button needs to tell Flash to go full screen, but Adobe forbids this Javascript-to-Actionscript interaction. What is a clever hack to work around this?

Background

I’m making a web based video player that supports many plugins – Flash, VLC, HTML5, iPhone’s Quicktime etc… I would like all these players to share the same chrome buttons – play, pause, mute, volume slider, resolution picker, and full screen. These buttons are layed out with HTML/CSS.

 ____________      ____________      ____________
|           |     |           |     |           |
|   Flash   |     |   VLC     |     |   HTML5   |       ...
|           |     |           |     |           |
-------------     -------------     -------------
[A][B][C][D]      [A][B][C][D]      [A][B][C][D]

All of the plugins that I deal with allow Javascript to control the plugin. Here’s an example of how you can get an HTML element to interface with an HTML5 video. The code is nearly identical when interfacing with the other plugins. The only thing that changes is the actual function name that is called.

// Using Prototype JS library
$('playButtonId').observe(
  'click',
  function(event) {
    $('html5Id').play();
  }
);

A problem arises for fullscreen in Flash. In Actionscript 3.0, you would do this to expose a fullscreen callback to Javascript:

package {
 import flash.external.*

 private var theStage:Stage;

 public class Player {

  public function Player(stageReference) {
   this.theStage = stageReference;
   ExternalInterface.addCallback("fullScreen", this.fullScreen);
  }

  private function fullScreen():void {
   this.theStage.displayState = StageDisplayState.FULL_SCREEN;
  }
 }
}

When Javascript calls $('flashPlayerId').fullScreen();, nothing happens because Adobe requires the full screen event to be triggered by a click within the SWF. This is to prevent hackers from writing malicious sites that hijack the user’s screen without them initiating it.

Current Hack

I’m currently recreating all the chrome buttons in Flash to support full screen. I had to import all my graphics into Flash and convert all the Javascript into Actionscript.

 ____________      ____________      ____________
|           |     |           |     |           |
|   Flash   |     |   VLC     |     |   HTML5   |       ...
|           |     |           |     |           |
|           |     -------------     -------------
| A  B  C D |      [A][B][C][D]      [A][B][C][D]
-------------

This has caused me a lot of pain and agony. Whenever I need to make a change, I update the HTML and JS. This change is reflected across the VLC, HTML5, and whatnot players. But since Flash does not share the same HTML chrome buttons, I have to duplicate the changes in Flash/AS. So I’m looking for a better solution that reduces the amount of duplicate code. It doesn’t have to be stylistically clean. I just want easy maintainability.

Answer 1

Just give your flash movie 0.1% opacity (you will need to use wmode), and position it directly over the html buttons. The user clicks on the flash but sees the html. The actionscript code just tells the player to go fullscreen, and then calls some javascript using ExternalInterface. Bounty please!