Embedding the Video Cloud Player in a Flash Document

This article describes a basic working Flash file that loads the Video Cloud player with a video.

This simple example has very little code, and should be a good starting point for anyone needing a basic working file, or a Flash designer new to using the Video Cloud player.

Requirements

The example code in this article requires Adobe Flash CS3 or later. The method can be used with CS2, but this particular FLA must be opened with CS3 or later.

Download the example files and unzip them.

About the files

The zip file includes the following files:

BrightcovePlayer.as

This file contains the ActionScript publishing code for a single video player, without any changes.

simple_flash.fla

This file contains only the following Actions on Frame 1 of the Timeline:

var config = {};
config["@videoPlayer"] = "71053191001";
var player:BrightcovePlayer = new BrightcovePlayer(config);
addChild(player);

The config object is used in this case to assign the video to the player. If you view the code comments in BrightcovePlayer.as, you will also see this code.

simple_flash.html

This file is a basic HTML file with the simple_flash.swf file embedded. This example helps illustrate very basic embed code.  

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
     codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0"
     width="588" height="410" id="simple_flash" align="middle">
  <param name="allowScriptAccess" value="always" />
  <param name="allowFullScreen" value="true" />
  <param name="movie" value="simple_flash.swf" />
  <param name="quality" value="high" />
  <param name="bgcolor" value="#ffffff" />
  <embed src="simple_flash.swf" quality="high" bgcolor="#ffffff" 
         width="588" height="410" name="simple_flash" align="middle" 
         allowScriptAccess="always" allowFullScreen="true" 
         type="application/x-shockwave-flash" 
         pluginspage="http://www.adobe.com/go/getflashplayer" />
</object>

Note the use of the allowScriptAccess="always" and allowFullScreen="true" parameters in the <embed> tag. These parameters enable more complex interactions using the Video Cloud APIs, and full screen behavior.

Using your own single video player

You can modify this easily for use with your own player by doing the following:

1. In the Video Cloud Studio Publishing module, copy the ActionScript publishing code for the player.
2. Replace all the code in BrightcovePlayer.as with the copied code, and save the file.
3. In Flash, replace the video ID with your own video. To do this, open the Actions on Frame 1 of the FLA file. Replace the number in quotes with the ID of one of your own videos, and click Save.
   

   config["@videoPlayer"] = "71053191001"; //use your video ID here
   

Using your own multi-video player

If your player is not a single video player but is instead a player that supports playlists, you must use a slightly different method, omitting the config object. Follow the instructions below for a simple way to use this type of player.

1. In the Video Cloud Studio Media module, assign playlists to your player.
2. In the Publishing module,  copy the ActionScript publishing code for the player.
3. Replace the code in BrightcovePlayer.as, and save the file.
4. In Flash, replace all the Actions in frame 1 with the code below:

   var player:BrightcovePlayer = new BrightcovePlayer();
   addChild(player); 

5. Save the documents and load the simple_flash.html page to test the movie.

Going Full Screen

If you're embedding the player in a Flash application, you need to configure your shell to properly display full screen mode. In addition to setting the allowFullScreen parameter to true in your object and embed tags, you also need to include the following in your shell SWF file:

stage.scaleMode = StageScaleMode.NO_SCALE;
stage.align = StageAlign.TOP_LEFT;

This code allows the player to expand to full screen without it scaling (the player needs to re-size internally, not scale up). It also allows the player to know when the stage is set back to its default size.