使用外部 API 控制 Flash Video

下面的过程演示如何使用 HTML 页中的控件控制 Flash Video (FLV) 文件，并在 HTML 文本字段中显示有关视频的信息。此过程使用外部 API 来实现此功能。

创建一个新的 Flash 文档，并将该文档保存为 video.fla。
从"库"面板的弹出菜单中选择"新建视频"，以向库中添加新的视频元件。
将视频元件拖动到舞台上，并为其给定实例名称 selected_video。
选择 selected_video 实例，然后选择属性检查器，将实例的大小调整为 320 像素宽，240 像素高。
将视频位置的 x 和 y 坐标都设置为 0。
选择舞台，并使用属性检查器将其尺寸调整为 320 x 240 像素。
现在，舞台即与视频实例的尺寸匹配。

将下面的 ActionScript 添加到主时间轴中的第 1 帧：

import flash.external.ExternalInterface;

/* 注册 playVideo() 和 pauseResume() 以便可以
从容器 HTML 页中的 JavaScript 中调用它们。 */
ExternalInterface.addCallback("playVideo", null, playVideo);
ExternalInterface.addCallback("pauseResume", null, pauseResume);

/* 该视频需要使用 NetConnection 和 NetStream 对象。 */
var server_nc:NetConnection = new NetConnection();
server_nc.connect(null);
var video_ns:NetStream = new NetStream(server_nc);

/* 将 NetStream 对象附加到舞台上的视频对象，
以便在视频对象中显示 NetStream 数据。 */
selected_video.attachVideo(video_ns);

/* 当 NetStream 对象的状态更新时（例如视频开始播放），
将自动调用 onStatus() 方法。
当出现这种情况时，请通过 ExternalInterface
调用 JavaScript updateStatus() 函数，以将代码属性值发送至 HTML 页。 */
video_ns.onStatus = function(obj:Object):Void {
    ExternalInterface.call("updateStatus", "  " + obj.code);
};

function playVideo(url:String):Void {
    video_ns.play(url);
}

function pauseResume():Void {
    video_ns.pause();
}

第一部分 ActionScript 代码定义两个 ExternalInterface 回调函数：playVideo() 和 pauseResume()。在下面的过程中，将从 JavaScript 中调用这些函数。第二部分代码创建一个新的 NetConnection 和 NetStream 对象，可将其用于视频实例，以动态回放 FLV 文件。

下一过程中的代码为 video_ns NetStream 对象定义了一个 onStatus 事件处理函数。只要 NetStream 对象一更改状态，Flash 便使用 ExternalInterface.call() 方法触发自定义 JavaScript 函数 updateStatus()。最后两个函数 playVideo() 和 pauseResume() 控制视频实例在舞台上的回放。在以下过程中编写的 JavaScript 中，这两个函数都会被调用。

保存 Flash 文档。
选择"文件">"发布设置"，然后选择"格式"选项卡，并确保 HTML 和 Flash 都已选中。
单击"发布"，将 SWF 和 HTML 文件发布到硬盘。
完成后，转到下一过程并为 SWF 文件创建容器。

在下面的过程中，您将修改在上一过程中由 Flash 生成的 HTML 代码。本过程创建在 SWF 文件中播放 FLV 文件所需的 JavaScript 和 HTML。

为 SWF 文件创建容器：

完成前面的过程。
打开您在前一过程的最后一个步骤中发布的 video.html 文档。

修改现有代码，以使其与下面的代码匹配：

注意

查看以下示例中的代码注释。此代码示例后提供了代码概述。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>ExternalInterface</title>

<script language="JavaScript">
    // 使用一个变量来引用嵌入的 SWF 文件。
    var flashVideoPlayer;
    
    /* 当 HTML 页加载时（通过 <body> 标签的 onLoad 事件），它将调用 initialize() 函数。 */
    function initialize() {
        /* 检查浏览器是否为 IE。如果是这样，则 flashVideoPlayer 为
window.videoPlayer。否则，它为 document.videoPlayer。
videoPlayer 是分配给 <object> 和 <embed> 标签的 ID。 */
        var isIE = navigator.appName.indexOf("Microsoft") != -1;
        flashVideoPlayer = (isIE) ? window['videoPlayer'] : document['videoPlayer'];
    }

    /* 当用户单击表单中的播放按钮时，将更新 videoStatus 文本区域，并调用 SWF 文件中的 playVideo() 函数，同时向其传递 FLV 文件的 URL。 */
    function callFlashPlayVideo() {
        var comboBox = document.forms['videoForm'].videos;
        var video = comboBox.options[comboBox.selectedIndex].value;
        updateStatus("____" + video + "____");
        flashVideoPlayer.playVideo("http://www.helpexamples.com/flash/video/" + video);
    }

    // 调用 SWF 文件中的 pauseResume() 函数。
    function callFlashPlayPauseVideo() {
        flashVideoPlayer.pauseResume();
    }

    /* 将在 SWF 文件中 NetStream 对象的 onStatus() 访法中调用 updateStatus() 函数。 */
    function updateStatus(message) {
        document.forms['videoForm'].videoStatus.value += message + "\n";
    }
</script>
</head>
<body bgcolor="#ffffff" onLoad="initialize();">

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
    codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="320" height="240" id="videoPlayer" align="middle">
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="video.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#ffffff" />
<embed src="video.swf" quality="high" bgcolor="#ffffff" width="320" height="240" name="videoPlayer" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>

<form name="videoForm">
    Select a video:<br />
    <select name="videos">
        <option value="lights_long.flv">lights_long.flv</option>
        <option value="clouds.flv">clouds.flv</option>
        <option value="typing_long.flv">typing_long.flv</option>
        <option value="water.flv">water.flv</option>
    </select>
    <input type="button" name="selectVideo" value="play" onClick="callFlashPlayVideo();" />
    <br /><br />

    Playback <input type="button" name="playPause" value="play/pause" onClick="callFlashPlayPauseVideo();" />

    <br /><br />
    Video status messages <br />
    <textarea name="videoStatus" cols="50" rows="10"></textarea>
</form>

</body>
</html>

此 HTML 代码定义四个 JavaScript 函数：initialize()、callFlashPlayVideo()、callFlashPlayPauseVideo() 和 updateStatus()。initialize() 函数将在 onLoad 事件的 body 标签内调用。当用户在 HTML 文档中单击播放按钮或播放/暂停按钮时，将调用 callFlashPlayVideo() 和 callFlashPlayPauseVideo() 函数，并触发 SWF 文件中的 playVideo() 和 pauseResume() 函数。

只要触发 video_ns NetStream 对象的 onStatus 事件处理函数，SWF 文件就将调用最后一个函数 updateStatus()。此 HTML 代码还定义一个表单，其中包含用户可从中进行选择的视频组合框。只要用户选择一个视频并单击播放按钮，便会调用 callFlashPlayVideo() JavaScript 函数，该函数然后将调用 SWF 文件中的 playVideo() 函数。此函数将传递加载到视频实例的 SWF 文件的 URL。随着视频的播放以及 NetStream 对象状态的更改，舞台上 HTML 文本区域的内容将更新。

保存对 HTML 文档的更改，然后将 HTML 和 SWF 文件上载到网站中。
从网站中打开远程 video.html 文档，从组合框中选择一个视频，然后单击播放按钮。
Flash 播放选定的 FLV 文件，并更新 HTML 文档中 videoStatus 文本区域中的内容。

有关外部 API 的更多信息，请参见"ActionScript 2.0 语言参考"中的 ExternalInterface (flash.external.ExternalInterface)。

使用外部 API 控制 Flash Video

使用外部 API 构建 Flash 应用程序：

为 SWF 文件创建容器：