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   |       ...开发者_JS百科
|           |     |           |     |           |
-------------     -------------     -------------
[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.

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!

You can NOT trigger full screen without user interaction to a flash component IE: mouse click on a button.
Even though, you have a click event in JavaScript it will not work as that click event will not be in the flash stack.

[EDIT]
One work around you can do is build your app in flex and use css to style the buttons.
Another work around. Create a layout swf in flex using css to style the buttons, and load and position the other swf inside it.
The work around will take a little setting up but then when you want to change the buttons you just have to change the css such as image source or colors or whatever you are changing.

You could use Haxe to create one single codebase that will translate to javascript as well as actionscript.

This means off course, that you would have to learn Haxe as well.

[EDIT]

A simpler approach might be to create a sprite sheet of all your images. This way you just have to import your sheet in css and set proper position of the sheet's viewport. And then you could also load the sprite sheet dynamically into flash.

The only thing your would have to take care of then is the correct positioning of the images within your sprite sheet.