如果 Adobe Flash 不可用，则提供替代图像答案

【问题标题】：Providing alternative images if Adobe Flash isn't available如果 Adobe Flash 不可用，则提供替代图像
【发布时间】：2010-10-01 18:40:29
【问题描述】：

如果用户没有安装和/或停用 Adobe Flash，是否有任何方法提供备用 GIF/PNG 图像。我找到了一些建议，例如来自 W3C 的以下建议，这些建议通过 JavaScript 确定客户端上是否存在 Adobe Flash：W3C Providing alternative images

老实说，我更喜欢 非 JS 技术。我在想一些 XHTML 标签，相当于<noscript>。（比如 <noobject> 如果对象（在我们的例子中是 Flash）无法显示/加载）。

需要这种分离的原因如下：我工作的银行最好以 Flash 格式显示他们的横幅。如果不可能显示一个简单的图像。在过去，它很可能以前面提到的方式解决。我们目前正在进行设计更新，这就是我偶然发现这段代码的地方，这让我想知道它是否真的是最优雅和最兼容的方式。

另一个让我印象深刻的想法：真的可以在禁用 JavaScript 的环境中加载 Flash 对象吗？

【问题讨论】：

既然您的“另一个想法”主导了讨论，那么编辑您的问题以将其作为主要想法怎么样？答案非常有用，但用当前的标题和标签很难找到。

标签： html flash

【解决方案1】：

实际上安装了 flash 但关闭了 javascript 是一个有效的方案。这应该适用于大多数浏览器：

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="800" height="600" id="flashContent">
  <param name="movie" value="flash.swf" />
  <!--[if !IE]>-->
    <object type="application/x-shockwave-flash" data="flash.swf" width="800" height="600">
  <!--<![endif]-->
      <img src="(...)" alt="Put your alternate content here" />
  <!--[if !IE]>-->
    </object>
  <!--<![endif]-->
</object>

【讨论】：

如果在我的示例中关闭了 javascript，则脚本不会运行，因此不会替换图像，并且...您将看到图像！ :) 所以：最后同样的事情 ;)
这就是我喜欢 SWFObjects 库的方式 ;) 到处都能完美运行
其他浏览器从什么时候开始对条件 cmets 做任何事情？这不是我见过的任何 w3c 规范的一部分。
好吧，在我看来，是否所有非 IE 浏览器都会忽略 [if !IE] 标签并不重要。他们将完全按照命令告诉我们的操作：解释第二个对象标签。只有 IE 会跳过标签。
条件 cmets 仅适用于 IE。这就是重点。

【解决方案2】：

我使用以下代码进行优雅降级。效果很好。

<!--[if !IE]> -->
<object type="application/x-shockwave-flash" data="flash.swf" width="500" height="100">
<!-- <![endif]-->

<!--[if IE]>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" 
    codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" 
    width="500" height="100">
  <param name="movie" value="flash.swf" />
<!--><!--dgx-->
  <param name="loop" value="false">
  <param name="menu" value="false">
  <param name="quality" value="high">
  <img src="flash_replacement.png" width="500" height="100" alt="No Flash">
</object>
<!-- <![endif]-->

【讨论】：

【解决方案3】：

我不知道你为什么要避免使用 javascript，它是处理 Flash 时最好的解决方案。

使用SWFObjects Library（迄今为止最知名的）您可以这样做：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
            "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
 <title> My Home Page </title> 
 <meta name="viewport" content="width=780"> 
 <script type="text/javascript" src="swfobject.js"></script> 
</head> 
<body> 
 <div id="splashintro"> 
   <a href="more.html"><img src="splash_noflash.png" /></a> 
 </div>
 <script type="text/javascript"> 
   var so = new SWFObject("csplash.swf", "my_intro", "300", "240", "8", "#338899"); 
   so.write("splashintro"); 
 </script> 
 </body> 
</html>

脚本所做的是将 splashintro div 替换为 flash 文件，如果浏览器不支持 Flash，则不执行任何操作并显示 splash_noflash.png .

P.S. 有了这个技巧，你就可以使用 iPhone，而不是显示蓝色立方体，它会显示图像:)

【讨论】：

有些人允许 Flash，但关闭了 Javascript。既然可以两全其美，为什么还要依赖 Javascript？
还有一些人因为没有足够的带宽或不喜欢在他们不知情的情况下运行脚本而将两者都关闭。
感谢您将我指向 SWF 对象库。对此投赞成票。虽然我没有选择它作为完美的答案，因为在我的特定情况下不需要使用 JS 库。
swfobject 2.0 有一些变化：code.google.com/p/swfobject/wiki/documentation

【解决方案4】：

我发现使用内联样式来解决问题。

例如：

<div style="background-image: url('...');">
    <object>
     /* Embedded Flash */
    </object>
</div>

【讨论】：

唯一的问题是你不能有链接或其他任何东西，只有静态背景非常有限。没有链接、表格、ajax 或其他区域.. 但是为了快速修复和替代...我想.. 另一个问题是你只有对象标签.. 很差。

【解决方案5】：

如果用户没有安装和/或停用 Adobe Flash，我们可以提供备用 GIF/PNG 图像。

<object id="flashcontent classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="550px" height="400px">
<param name="movie" value="mymovie.swf" />

<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="mymovie.swf" width="550px" height="400px">
<!--<![endif]-->

<p>
Fallback or 'alternate' content goes here.
This content will only be visible if the SWF fails to load.
</p>

<!--[if !IE]>-->
</object>
<!--<![endif]-->

</object>

还要加上这个...

<script type="text/javascript">
swfobject.registerObject("flashcontent", "9", "/path/to/expressinstall.swf");   
</script>

【讨论】：

【解决方案6】：

我已经用 CSS 编写了一个简单的方法来做到这一点 - 根本不需要额外的 JavaScript。

为您的 Flash 电影所在的 ID/类别命名，并使用背景图片。将您的 Flash 电影包装在该 div 中。

例如：

<div ID="MyFlashMovie"><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="800" height="600" id="flashContent">
  <param name="movie" value="flashMovie.swf" />... etc., etc.</object>
</div> etc.

然后在你的 CSS 中：

#MyFlashMovie {
background: url("alternateGraphic.png");
background-repeat: no-repeat;
height: XXpx;
width: XXpx;
}

当 Flash 不可用时，例如在 iphone/pad 上，图形将显示。我发现唯一的缺点是，如果您的 Flash 电影使用透明背景，您将通过过渡看到 alt 图形。只需在 Flash 电影中制作一个纯色作为您的最低层（确保它与网站的背景颜色相同），它看起来会很好。

~GreaseJunkie

【讨论】：