您现在的位置是：网站首页 > 嵌入Flash的方法文章详情

嵌入Flash的方法

陈川 【 HTML 】 15219人已围观 9234字

传统<object>与<embed>标签

早期在HTML中嵌入Flash主要依赖<object>和<embed>标签。这两种标签需要配合MIME类型和插件声明使用：

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" 
        width="550" height="400"
        codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab">
    <param name="movie" value="example.swf" />
    <param name="quality" value="high" />
    <embed src="example.swf" 
           width="550" height="400"
           quality="high"
           type="application/x-shockwave-flash"
           pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>

这种写法需要处理浏览器兼容问题：

  • IE浏览器优先解析<object>的classid属性
  • 其他浏览器主要解析<embed>标签
  • 必须设置正确的MIME类型application/x-shockwave-flash

SWFObject动态嵌入方法

SWFObject是更现代的Flash嵌入方案，通过JavaScript动态生成嵌入代码：

<script src="swfobject.js"></script>
<div id="flashcontent">
    <p>需要安装Flash播放器才能查看内容</p>
</div>
<script>
    swfobject.embedSWF(
        "example.swf",  // SWF文件URL
        "flashcontent", // 容器ID
        "550",          // 宽度
        "400",          // 高度
        "9.0.0",       // 所需Flash Player版本
        "expressInstall.swf", // 安装文件
        {},             // Flash变量
        {               // 参数
            quality: "high",
            wmode: "transparent"
        },
        {               // 属性
            id: "example",
            name: "example"
        }
    );
</script>

优势包括：

  • 自动检测Flash插件版本
  • 支持渐进增强的备用内容显示
  • 提供统一的API接口
  • 解决IE的ActiveX激活问题

使用<iframe>嵌套Flash

在某些特殊场景下，可以通过iframe嵌入Flash内容：

<iframe src="flashplayer.html?file=example.swf" 
        width="550" 
        height="400"
        frameborder="0"
        scrolling="no">
</iframe>

其中flashplayer.html内容为：

<!DOCTYPE html>
<html>
<head>
    <title>Flash Player</title>
    <style>body { margin:0; padding:0; }</style>
</head>
<body>
    <object width="100%" height="100%">
        <param name="movie" value="<%=Request.QueryString["file"] %>" />
        <embed src="<%=Request.QueryString["file"] %>" 
               width="100%" 
               height="100%"
               type="application/x-shockwave-flash" />
    </object>
</body>
</html>

这种方法适用于：

  • 需要隔离Flash的安全沙箱
  • 跨域内容加载
  • 响应式布局中的Flash内容

Flash与JavaScript通信

嵌入Flash后常需要实现与页面的交互：

// Flash内部ActionScript代码
import flash.external.ExternalInterface;

ExternalInterface.call("jsFunction", "参数");
ExternalInterface.addCallback("flashFunction", null, asFunction);

function asFunction(param:String):void {
    trace("从JS接收到的参数: " + param);
}

对应HTML中的JavaScript：

function jsFunction(msg) {
    console.log("Flash发送的消息: " + msg);
}

// 调用Flash内部方法
document.getElementById("flashObj").flashFunction("来自JS的消息");

关键点：

  • 需要设置allowScriptAccess参数
  • 跨域时需要正确配置crossdomain.xml
  • 注意不同浏览器的安全限制

移动端兼容处理

针对移动设备的特殊处理方案：

<div class="flash-container">
    <object id="flashObj"...>
        <!-- 传统Flash嵌入代码 -->
    </object>
    <div class="fallback">
        <video controls width="550" height="400">
            <source src="fallback.mp4" type="video/mp4">
            您的浏览器不支持HTML5视频
        </video>
    </div>
</div>

<style>
    .flash-container { position:relative; }
    .fallback { 
        position:absolute; 
        top:0; 
        left:0;
        display:none;
    }
    /* 移动设备显示备用内容 */
    @media (max-device-width: 1024px) {
        object { display:none; }
        .fallback { display:block; }
    }
</style>

性能优化技巧

提升Flash内容加载效率的方法：

  1. 预加载策略：
// 使用JavaScript预加载SWF
var preloader = new Image();
preloader.src = "example.swf";

// 或者使用专门的预加载器
function preloadSWF(url) {
    var xhr = new XMLHttpRequest();
    xhr.open('GET', url, true);
    xhr.responseType = 'arraybuffer';
    xhr.send();
}
  1. 延迟加载技术：
<div id="flashContainer"></div>

<script>
window.addEventListener('load', function() {
    setTimeout(function() {
        // 页面加载完成后再加载Flash
        swfobject.embedSWF("example.swf", "flashContainer", ...);
    }, 1000);
});
</script>
  1. 使用Flash Var参数传递初始数据：
var flashVars = {
    configUrl: "config.xml",
    userId: "12345",
    lang: "zh-CN"
};

swfobject.embedSWF("app.swf", "container", "800", "600", "10", 
                  "", flashVars, {quality:"high"}, {});

安全配置要点

确保Flash内容安全的最佳实践：

  1. 跨域策略文件crossdomain.xml：
<?xml version="1.0"?>
<cross-domain-policy>
    <allow-access-from domain="*.example.com" />
    <allow-access-from domain="assets.example.net" secure="true" />
    <allow-http-request-headers-from domain="api.example.com" headers="*" />
</cross-domain-policy>
  1. HTML嵌入参数的安全设置：
<object ...>
    <param name="allowNetworking" value="internal" />
    <param name="allowScriptAccess" value="sameDomain" />
    <param name="allowFullScreen" value="false" />
</object>
  1. 内容安全策略(CSP)设置：
Content-Security-Policy: default-src 'self'; 
                         object-src 'self' 
                         https://flash.example.com;
                         script-src 'self' 'unsafe-eval'

检测Flash支持情况

完整的Flash环境检测方案：

function checkFlashSupport() {
    var hasFlash = false;
    try {
        var fo = new ActiveXObject('ShockwaveFlash.ShockwaveFlash');
        if(fo) hasFlash = true;
    } catch(e) {
        if(navigator.mimeTypes 
           && navigator.mimeTypes['application/x-shockwave-flash'] 
           && navigator.mimeTypes['application/x-shockwave-flash'].enabledPlugin){
            hasFlash = true;
        }
    }
    return hasFlash;
}

function getFlashVersion() {
    var version = 0;
    if(navigator.plugins && navigator.plugins["Shockwave Flash"]) {
        var desc = navigator.plugins["Shockwave Flash"].description;
        var matches = desc.match(/[\d]+/g);
        version = matches[0] + '.' + matches[1];
    } else if (window.ActiveXObject) {
        try {
            var flash = new ActiveXObject("ShockwaveFlash.ShockwaveFlash");
            if(flash) {
                var ver = flash.GetVariable("$version");
                version = ver.split(" ")[1].split(",").join(".");
            }
        } catch(e) {}
    }
    return parseFloat(version);
}

替代内容处理

完善的降级处理方案示例：

<div id="flash-content">
    <object id="flashObj" ...>
        <!-- Flash嵌入代码 -->
        <div class="flash-alternative">
            <h3>需要Flash播放器</h3>
            <p>您可以通过以下方式访问内容：</p>
            <ul>
                <li><a href="alternative.html">HTML5版本</a></li>
                <li><a href="video.mp4">下载视频文件</a></li>
                <li><a href="https://get.adobe.com/flashplayer/">安装Flash播放器</a></li>
            </ul>
            <img src="preview.jpg" alt="内容预览">
        </div>
    </object>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    if(!checkFlashSupport() || getFlashVersion() < 9) {
        var altContent = document.querySelector('#flash-content .flash-alternative');
        altContent.style.display = 'block';
    }
});
</script>

响应式布局集成

使Flash内容适应不同屏幕尺寸：

<div class="responsive-flash">
    <object id="responsiveFlash" ...>
        <!-- Flash内容 -->
    </object>
</div>

<style>
.responsive-flash {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 比例 */
    height: 0;
    overflow: hidden;
}
.responsive-flash object {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
</style>

<script>
// 监听窗口大小变化
window.addEventListener('resize', function() {
    var flashObj = document.getElementById('responsiveFlash');
    if(flashObj && flashObj.style) {
        // 向Flash发送新的尺寸信息
        try {
            flashObj.setAttribute('width', flashObj.parentNode.offsetWidth);
            flashObj.setAttribute('height', flashObj.parentNode.offsetHeight);
            if(flashObj.resize) {
                flashObj.resize();
            }
        } catch(e) {}
    }
});
</script>

高级参数配置

完整的Flash嵌入参数参考：

var params = {
    // 基本显示参数
    quality: "best",
    scale: "noscale",
    salign: "lt",
    wmode: "direct",
    
    // 功能控制参数
    play: "true",
    loop: "false",
    menu: "true",
    allowFullScreen: "true",
    allowScriptAccess: "always",
    
    // 硬件加速参数
    devicefont: "false",
    swliveconnect: "true",
    seamlesstabbing: "false",
    
    // 音频视频参数
    sound: "on",
    volume: "80",
    mute: "false",
    
    // 调试参数
    debug: "false",
    log: "errors"
};

var attributes = {
    id: "myFlashApp",
    name: "myFlashApp",
    style: "outline:none",
    align: "middle",
    class: "flash-content"
};

swfobject.embedSWF("app.swf", "container", "100%", "100%", 
                  "11.0.0", "expressInstall.swf", {}, params, attributes);

常见问题解决

典型问题及其解决方案：

  1. Flash内容被遮挡：
/* 解决方案 */
object, embed {
    position: relative;
    z-index: 1000;
}
  1. IE中Flash不显示：
<!-- 添加以下元标签 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
  1. Flash与HTML元素重叠问题：
// 设置wmode参数
params.wmode = "opaque";  // 或 "transparent"
  1. 键盘事件不响应：
params.allowKeyboard = "true";
attributes.tabindex = "0";
  1. 全屏模式问题：
params.allowFullScreen = "true";
params.allowFullScreenInteractive = "true";

上一篇： 嵌入视频的方法

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

相关文章

我的名片

网名：~川~

岗位：console.log 调试员

坐标：重庆市-九龙坡区

邮箱：cc@qdcc.cn

访问排行

富文本样式设置 富文本样式设置

本栏推荐

<area>-图像映射区域 <area>-图像映射区域

猜你喜欢

沙漏人生

站点信息

  • 建站时间：2013/03/16
  • 本站运行：
  • 文章数量：
  • 总访问量：
微信公众号
每次关注
都是向财富自由迈进的一步