VideoIO Flash-based audio and video communication

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.

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>

<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.

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)"/>

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.