How to embed VideoIO in your web page?

VideoIO.swf is a Flash application that you can embed in your web page using standard <object> tag, which is supported by all popular web browsers including Internet Explorer and Firefox. At the minimum you just need to specify the type, data, id, width and height attributes, and movie parameter. The following example shows how to embed VideoIO with object identifier as video1.

<object type="application/x-shockwave-flash" data="VideoIO.swf" 
    id="video1" width="320" height="240">
    <param name="movie" value="VideoIO.swf" />
</object>

It is recommended to specify the dimension of 320x240 for the VideoIO embed. I also assume that VideoIO.swf is available in the same path as the embedding HTML page. Otherwise, you can specify the full path of http://myprojectguide.org/flash-videoio/p/VideoIO.swf in the data attribute and movie parameter. The problem with embedding Flash application of another web site is that by default you cannot interact between JavaScript within your HTML page and my Flash application if they are loaded from different web sites.

Information: The minimum dimension for VideoIO application MUST be 215x138. This is because Flash Player requires the minimum dimension of the application as 215x138 to display the device access security panel to enable access to camera and microphone. For applications smaller than this dimension, the device access is always disabled.

In practice, you would want to specify the quality, bgcolor, allowFullScreen, allowScriptAccess and flashVars parameters as well. The quality attribute causes the Flash Player to use the specified quality setting when playing the movie. The bgcolor parameter defines the background color which typically is set to black for video applications. The allowFullScreen enables the full screen mode for the video application. The allowScriptAccess defines how the Flash application will interact with any JavaScript -- which I use as "always". Alternatively, you can set it to "sameDomain" for better security. Finally, the flashVars parameter defines the additional parameters sent to the application. Such additional parameters are application dependent, and the VideoIO application defines several properties that can be set using the flashVars parameter. The following example shows how to enable these parameters -- high quality, black background, full screen mode, always allow script access and enable video control panel display.

<object type="application/x-shockwave-flash" data="VideoIO.swf"
    id="video1" width="320" height="240">
    <param name="movie" value="VideoIO.swf" />
    <param name="quality" value="high" />
    <param name="bgcolor" value="#000000" />
    <param name="allowFullScreen" value="true" />
    <param name="allowScriptAccess" value="always" />
    <param name="flashVars" value="controls=true" />
</object>
Although, the object tag is the standard way to embed, there are certain restrictions, e.g., if the Flash Player plugin is not installed, it will not load any embed application or prompt you for plugin installation. Traditionally, Flash applications have used a combination of JavaScript, object and embed tags to implement cross browser verification of correct version and application embed. If you are paranoid about cross browser compatibility or want to allow plugin installation prompt if the plugin is missing on user's computer, you can use the following example.
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
    id="video1" width="320" height="240"
    codebase="http://fpdownload.macromedia.com/get/flashplayer/current/swflash.cab">
    <param name="movie" value="VideoIO.swf" />
    <param name="quality" value="high" />
    <param name="bgcolor" value="#000000" />
    <param name="allowFullScreen" value="true" />
    <param name="allowScriptAccess" value="always" />
    <param name="flashVars" value="controls=true" />
    <embed src="VideoIO.swf" quality="high" bgcolor="#000000"
        width="320" height="240" name="video1" align="middle"
        play="true" loop="false" quality="high"
        allowFullScreen="true"
        allowScriptAccess="sameDomain"
        flashVars="controls=true"
        type="application/x-shockwave-flash"
        pluginspage="http://www.adobe.com/go/getflashplayer">
            Please install Flash Player version 10 or later!
    </embed>
</object>

You need to use both these tags. The Microsoft's web browser interprets the outer object tag whereas Mozilla compatible ones ignore it because of classid and codebase attributes. Instead, Mozilla browsers fallback to nested embed tag to load the Flash application. If the plugin is missing the nested text is displayed which prompts the user to install the Flash Player plugin. Alternatively, you can use the popular SWFobject.js script to programmatically include the Flash application.

The nested object and embed tag is needed to enable communication from your Flash application to JavaScript embedded on your HTML page using ExternalInterface. Please see How to use the VideoIO API? for details on the onCreationComplete and onPropertyChange event handlers in JavaScript to capture the events of the VideoIO application. If you need to use these events in your JavaScript, you must use the nested tags or SWFobject.js, otherwise the ExternalInterface cannot correctly identify the Flash application's name, and hence VideoIO disables invoking JavaScript function.

Information: All our future examples use the standard object tag, unless we need event handlers in JavaScript. Feel free to replace it with the combination of object, embed and SWFobject.js in your web site as explained above based on your requirements. You will need to make sure that any change in the object parameter must also be reflected in the corresponding change in the embed attribute for cross browser compatibility.

Different versions of Flash Player have different capabilities. For example, acoustic echo cancellation was introduced in version 10.3, and H.264 AVC and G.711 codecs where added in version 11.0. Unfortunately due to the different Flex SDK and SWF version requirements, a SWF binary compiled to enable echo cancellation cannot work on versions before 10.3, and a SWF binary compiled to enable H.264 cannot work on versions before 11. Thus, our project compiles and distributes three SWFs in every release. The VideoIO.swf file works for version 10+ but lacks echo cancellation or advanced codecs. The VideoIO45.swf file works for version 10.3+, has echo cancellation but lacks advanced codecs. The VideoIO11.swf file works for version 11+, has echo cancellation and advanced codecs. As a developer you can force a fixed SWF or dynamically pick the right SWF based on the Flash Player version of the end-user.

An ideal application should dynamically detect and load the appropriate SWF based on the Flash Player version detected in the end user's browser. This allows VideoIO enhancements to take advantage of the latest Flash Player features if available, and fall back if the user runs an older Flash Player.

Dynamic detection: An example of how to dynamically detect and load the right SWF of VideoIO is shown in test.html -- search for DetectFlashVar and follow the code. This code uses the Flash version detection code in JavaScript from Adobe, and covers the nested object and embed tags.

The VideoIO embed defines several properties to control the behavior of the application or give indication of current status. Please see How to use the VideoIO API? for details of these properties. You can set these properties statically using the flashVars parameter as mentioned before, or dynamically using JavaScript. The following example script allows you get a reference to the VideoIO object named video1 embedded in your HTML page.

function getFlashMovie(movieName) {
    var isIE = navigator.appName.indexOf("Microsoft") != -1;
    return (isIE) ? window[movieName] : document[movieName];  
}
obj = getFlashMovie("video1");

Once you have a reference to the VideoIO application, you can set its properties programmatically. The following example shows a check box, which when selected will set the controls property of the VideoIO object named video1. Setting the controls property results in display of video control panel. Note that you need to delay the invocation of getFlashMovie and setProperty until the Flash application is loaded to avoid any run-time exception. Calling these in response to user input works well in practice

<object type="application/x-shockwave-flash" data="VideoIO.swf"
    id="video1" width="320" height="240">
    <param name="movie" value="VideoIO.swf" />
    <param name="quality" value="high" />
    <param name="bgcolor" value="#000000" />
    <param name="allowFullScreen" value="true" />
    <param name="allowScriptAccess" value="always" />
</object>

<script>
function getFlashMovie(movieName) {
    var isIE = navigator.appName.indexOf("Microsoft") != -1;
    return (isIE) ? window[movieName] : document[movieName];  
}
</script>

<input id="controls1" type="checkbox" autocomplete="off"
    onclick="getFlashMovie('video1').setProperty('controls',
        document.getElementById('controls1').checked)"/>
select to enable control panel

The above running example, as well as several others later, allow you to quickly see the demonstration, as well as allows you to copy the right-side HTML code to include it in your web page. Once you are able to embed VideoIO in your web page, you should try testing compatibility across various web browsers. Subsequent examples assume that you have already learned how to embed VideoIO and have included the getFlashMovie function in your JavaScript.