嵌入Flash的方法

作者：陈川阅读数：30248人阅读分类： HTML

Flash曾经是网页中嵌入多媒体内容的主流技术，虽然现在逐渐被HTML5取代，但在某些遗留系统中仍然需要了解它的实现方式。下面详细介绍几种常见的嵌入Flash的方法。

使用`<object>`和`<embed>`标签

最传统的方式是通过<object>和<embed>标签嵌入Flash文件。这种方法兼容性较好，但需要同时使用两个标签以确保在不同浏览器中正常工作。

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" 
        width="550" height="400" 
        codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0">
    <param name="movie" value="example.swf" />
    <param name="quality" value="high" />
    <param name="allowScriptAccess" value="always" />
    <embed src="example.swf" 
           quality="high" 
           width="550" height="400" 
           type="application/x-shockwave-flash" 
           pluginspage="http://www.macromedia.com/go/getflashplayer" 
           allowScriptAccess="always" />
</object>

使用SWFObject库

SWFObject是一个JavaScript库，专门用于嵌入Flash内容。它提供了更简洁的API和更好的浏览器兼容性。

首先需要引入SWFObject库：

<script src="https://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>

然后使用以下代码嵌入Flash：

swfobject.embedSWF(
    "example.swf",  // SWF文件路径
    "flashContainer",  // 容器ID
    "550",  // 宽度
    "400",  // 高度
    "9.0.0",  // 最低要求的Flash Player版本
    "expressInstall.swf",  // 可选：用于升级的Express Install SWF
    {},  // Flash变量
    {  // 参数
        quality: "high",
        allowScriptAccess: "always",
        allowFullScreen: "true"
    },
    {  // 属性
        id: "exampleFlash",
        name: "exampleFlash"
    }
);

使用纯JavaScript动态创建

如果不使用第三方库，也可以直接通过JavaScript动态创建Flash嵌入代码：

function embedFlash(swfPath, containerId, width, height) {
    var container = document.getElementById(containerId);
    var flashHTML = '<object type="application/x-shockwave-flash" data="' + swfPath + '" width="' + width + '" height="' + height + '">';
    flashHTML += '<param name="movie" value="' + swfPath + '" />';
    flashHTML += '<param name="quality" value="high" />';
    flashHTML += '<param name="allowScriptAccess" value="always" />';
    flashHTML += '</object>';
    container.innerHTML = flashHTML;
}

// 使用示例
embedFlash("example.swf", "flashContainer", 550, 400);

处理浏览器兼容性问题

由于现代浏览器逐渐放弃对Flash的支持，需要考虑降级方案。可以在<object>标签中添加替代内容：

<object ...>
    <!-- Flash嵌入代码 -->
    <param ...>
    <embed ...>
    <!-- 替代内容 -->
    <div class="flash-alternative">
        <p>您的浏览器不支持Flash，请<a href="example.html">点击这里</a>查看HTML5版本。</p>
    </div>
</object>

使用HTML5的`<embed>`标签

虽然<embed>标签不是HTML5新增的，但在HTML5中它的使用更加标准化：

<embed src="example.swf" 
       width="550" 
       height="400" 
       type="application/x-shockwave-flash" 
       pluginspage="http://www.adobe.com/go/getflashplayer" 
       allowScriptAccess="always" 
       quality="high" />

通过iframe嵌入Flash

另一种方法是将Flash文件放在单独的HTML页面中，然后通过iframe嵌入：

<iframe src="flash_content.html" width="550" height="400" frameborder="0"></iframe>

其中flash_content.html包含Flash嵌入代码：

<!DOCTYPE html>
<html>
<head>
    <title>Flash Content</title>
</head>
<body>
    <object ...>
        <!-- Flash嵌入代码 -->
    </object>
</body>
</html>

使用FlashVars传递参数

可以通过FlashVars向Flash文件传递参数：

<object ...>
    <param name="movie" value="example.swf" />
    <param name="FlashVars" value="param1=value1&param2=value2" />
    <embed ... FlashVars="param1=value1&param2=value2" />
</object>

或者在JavaScript中使用SWFObject：

swfobject.embedSWF("example.swf", "flashContainer", "550", "400", "9.0.0", 
    null, 
    {  // Flash变量
        param1: "value1",
        param2: "value2"
    },
    ...);

检测Flash Player安装情况

可以使用JavaScript检测用户浏览器是否安装了Flash Player：

function hasFlash() {
    try {
        return Boolean(new ActiveXObject('ShockwaveFlash.ShockwaveFlash'));
    } catch (e) {
        return (typeof navigator.mimeTypes['application/x-shockwave-flash'] !== 'undefined');
    }
}

if (!hasFlash()) {
    document.getElementById('flashContainer').innerHTML = 
        '<p>请安装Flash Player以查看此内容</p>';
}

响应式Flash嵌入

为了使Flash内容适应不同屏幕尺寸，可以使用CSS和百分比宽度：

<div class="flash-wrapper">
    <object ... width="100%" height="100%">
        <!-- Flash嵌入代码 -->
    </object>
</div>

<style>
    .flash-wrapper {
        width: 100%;
        height: 0;
        padding-bottom: 75%; /* 4:3 宽高比 */
        position: relative;
    }
    .flash-wrapper object {
        position: absolute;
        width: 100%;
        height: 100%;
    }
</style>

使用Express Install进行自动升级

SWFObject支持Express Install功能，可以在用户Flash Player版本过低时自动提示升级：

swfobject.embedSWF("example.swf", "flashContainer", "550", "400", "9.0.0", 
    "expressInstall.swf",  // Express Install SWF文件
    ...);

需要确保expressInstall.swf文件与主SWF文件在同一目录下。

处理全屏模式

要允许Flash内容进入全屏模式，需要设置allowFullScreen参数：

<object ...>
    <param name="allowFullScreen" value="true" />
    <embed ... allowFullScreen="true" />
</object>

或者在SWFObject中：

swfobject.embedSWF(..., {
    allowFullScreen: "true"
}, ...);

跨域通信安全设置

如果Flash需要与JavaScript进行跨域通信，需要设置crossdomain.xml文件和allowScriptAccess参数：

<object ...>
    <param name="allowScriptAccess" value="always" />
    <embed ... allowScriptAccess="always" />
</object>

同时在服务器根目录下放置crossdomain.xml文件：

<?xml version="1.0"?>
<cross-domain-policy>
    <allow-access-from domain="*" />
</cross-domain-policy>

使用Flash Player检测和安装

Adobe提供了官方的Flash Player检测和安装工具：

<script src="//ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
<script>
    var flashvars = {};
    var params = {
        menu: "false",
        scale: "noScale",
        allowFullscreen: "true",
        allowScriptAccess: "always",
        bgcolor: ""
    };
    var attributes = {
        id:"myFlashContent"
    };
    swfobject.embedSWF(
        "myContent.swf", 
        "altContent", 
        "550", 
        "400", 
        "10.0.0", 
        "expressInstall.swf", 
        flashvars, 
        params, 
        attributes
    );
</script>
<div id="altContent">
    <h1>Alternative content</h1>
    <p><a href="http://www.adobe.com/go/getflashplayer">Get Adobe Flash player</a></p>
</div>

处理移动设备上的Flash

由于大多数移动设备不支持Flash，需要特别处理：

<object ...>
    <!-- Flash嵌入代码 -->
    <div class="no-flash">
        <p>移动设备不支持Flash，请使用桌面浏览器访问。</p>
        <!-- 或者提供HTML5替代内容 -->
        <video controls>
            <source src="video.mp4" type="video/mp4">
        </video>
    </div>
</object>

使用Flash与JavaScript通信

Flash可以通过ExternalInterface与JavaScript进行双向通信：

ActionScript端：

import flash.external.ExternalInterface;

// 调用JavaScript函数
ExternalInterface.call("jsFunction", "参数");

// 注册供JavaScript调用的函数
ExternalInterface.addCallback("flashFunction", function(param:String):String {
    return "Flash收到: " + param;
});

JavaScript端：

// 调用Flash中的函数
document.getElementById("myFlash").flashFunction("参数");

// Flash调用的JavaScript函数
function jsFunction(param) {
    console.log("JavaScript收到: " + param);
}

性能优化技巧

为了提高Flash内容的加载和运行性能：

预加载SWF文件：

swfobject.preloadSWF("example.swf");

使用较小的SWF文件尺寸
优化ActionScript代码
使用加载进度条：

<div id="loading">
    <p>加载中... <span id="loadPercent">0</span>%</p>
</div>
<script>
function showLoadProgress(percent) {
    document.getElementById("loadPercent").innerHTML = percent;
}
</script>

ActionScript端：

loaderInfo.addEventListener(ProgressEvent.PROGRESS, function(e:ProgressEvent):void {
    var percent:Number = Math.round(e.bytesLoaded / e.bytesTotal * 100);
    ExternalInterface.call("showLoadProgress", percent);
});

处理键盘事件

要在Flash中捕获键盘事件，需要设置wmode参数：

<object ...>
    <param name="wmode" value="opaque" />
    <embed ... wmode="opaque" />
</object>

或者在SWFObject中：

swfobject.embedSWF(..., {
    wmode: "opaque"
}, ...);

使用Flash本地存储

Flash可以通过SharedObject实现本地存储：

ActionScript端：

var so:SharedObject = SharedObject.getLocal("myData");
so.data.userName = "John";
so.flush();

JavaScript可以通过ExternalInterface访问这些数据。

调试Flash内容

调试嵌入的Flash内容可以使用以下方法：

使用Flash Debug Player
在JavaScript中捕获错误：

try {
    // Flash操作代码
} catch (e) {
    console.error("Flash错误: " + e.message);
}

使用浏览器开发者工具检查Flash对象

处理不同DPI屏幕

为了使Flash内容在高DPI屏幕上显示清晰：

<object ...>
    <param name="scale" value="exactFit" />
    <embed ... scale="exactFit" />
</object>

或者使用JavaScript动态调整尺寸：

function adjustFlashSize() {
    var dpi = window.devicePixelRatio || 1;
    var flashObj = document.getElementById("myFlash");
    if (flashObj) {
        flashObj.width = 550 * dpi;
        flashObj.height = 400 * dpi;
    }
}
window.addEventListener("resize", adjustFlashSize);
adjustFlashSize();

做个网站！

本站部分内容来自互联网,一切版权均归源网站或源作者所有。

如果侵犯了你的权益请来信告知我们删除。邮箱：cc@cccx.cn

上一篇：嵌入视频的方法

下一篇：表格的基本结构(table, tr, td)

嵌入Flash的方法

使用`<object>`和`<embed>`标签

使用SWFObject库

使用纯JavaScript动态创建

处理浏览器兼容性问题

使用HTML5的`<embed>`标签

通过iframe嵌入Flash

使用FlashVars传递参数

检测Flash Player安装情况

响应式Flash嵌入

使用Express Install进行自动升级

处理全屏模式

跨域通信安全设置

使用Flash Player检测和安装

处理移动设备上的Flash

使用Flash与JavaScript通信

性能优化技巧

处理键盘事件

使用Flash本地存储

调试Flash内容

处理不同DPI屏幕

前端川

相关文章

'<output>'标签的作用与使用

禁止缩放：<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

同源策略与跨域安全

表格的嵌套使用

图像的宽高设置

<tr>-表格行

嵌入Flash的方法

使用<object>和<embed>标签

使用SWFObject库

使用纯JavaScript动态创建

处理浏览器兼容性问题

使用HTML5的<embed>标签

通过iframe嵌入Flash

使用FlashVars传递参数

检测Flash Player安装情况

响应式Flash嵌入

使用Express Install进行自动升级

处理全屏模式

跨域通信安全设置

使用Flash Player检测和安装

处理移动设备上的Flash

使用Flash与JavaScript通信

性能优化技巧

处理键盘事件

使用Flash本地存储

调试Flash内容

处理不同DPI屏幕

前端川

相关文章

'<output>'标签的作用与使用

禁止缩放：<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

同源策略与跨域安全

表格的嵌套使用

图像的宽高设置

<tr>-表格行

使用`<object>`和`<embed>`标签

使用HTML5的`<embed>`标签