使用 Flash 并保持标准兼容

Avatar of Chris Coyier
Chris Coyier

DigitalOcean 为您的旅程的每个阶段提供云产品。立即开始使用 $200 免费积分!

任何在网页上使用过 Flash 的人都可能遇到过这样一个事实,即将 Flash 嵌入网页通常不是一件容易的事。Flash 提供给您的嵌入代码类似于这样

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" width="650" height="117" id="test-flash-banner" align="middle">
	<param name="allowScriptAccess" value="sameDomain" />
	<param name="allowFullScreen" value="false" />
	<param name="movie" value="test-flash-banner.swf" /><param name="quality" value="high" />
	<param name="wmode" value="transparent" /><param name="bgcolor" value="#ffffff" />
	<embed src="test-flash-banner.swf" quality="high" wmode="transparent" bgcolor="#ffffff" width="650" height="117" name="test-flash-banner" align="middle" allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>

这种方式并不奇怪……它有效。但是它的工作方式是通过蛮力(有时被称为“二次烹饪”方法)并包含大多数浏览器不需要的内容。最大的问题是 <embed> 标签,它是无效的代码,会导致您的页面无法通过标准验证。

这是一个 长期存在的问题。甚至有一篇 2002 年的 A List Apart 文章:Flash Satay: 在支持标准的同时嵌入 Flash。五年后,他们还在 谈论它

幸运的是,一些聪明的人已经着手解决这个问题。现在有各种方法可以处理标准兼容的 Flash 嵌入。以下是一些选择

<swfobject>

Swfobject 是这个领域的大腕。一些之前的项目甚至 认为自己已经过时 并推荐使用 swfobject。Swfobject 是开源的并且非常强大,尤其是在最近的 2.0 版本中。使用 swfobject 嵌入 Flash 有两种选择,两者都符合标准。由于功能实在太多,这里无法一一列举,我将只提几个我认为比较突出的功能

  • 自动检测 Flash 版本并相应地进行操作
  • 可以提供自动升级 Flash 版本的功能
  • 在 Flash 不可用的情况下提供替代内容,这对 SEO 也很有帮助
  • 将 Flash 带到 Flash 支持非常差的设备上,例如 PSP
  • 消除 IE 中的“点击激活”垃圾

甚至有一个 代码生成器伴侣,可以帮助您构建开始所需的代码。

 

Objecty

Objecty 是这个领域的新秀。

Objecty 使在网页上放置视频和音频变得非常简单。它的目标是重新整理整个模式。(或者类似的东西。)

它的目标是简单易用,我很喜欢这一点。基本上,您只需要在页面上包含 objecty javascript 文件,然后在页面上嵌入媒体对象就像包含一个带有唯一类的对象标签一样简单。它支持 Flash(.flv (!) 和 .swf 格式),但也支持许多其他格式:.mp4、.m4v、.m4a、.m4b、.wmv、.mov、.unity

代码如下

<object class="ObjectyMe" uri="myFlashMovie.swf" width="550" height="400"></object>

 

jQuery Media Plugin

如果您已经在页面上使用 jQuery,您可能需要考虑使用 jQuery Media Plugin,它可能是迄今为止最简单的解决方案。它的工作原理是通过类名或 ID 名来定位页面上的锚点元素,并将其替换为放置 Flash 的相应代码。

jQuery

$('.media').media();

标记

<a class="media" href="sample.swf">My Flash Movie</a>

它内置了浏览器检测功能,可以将锚点标签替换为相应的代码。因为您的代码在标记中根本不会包含任何嵌入代码,所以无需担心验证错误。

与 Objecty 一样,这个插件远远不止限于 Flash。以下是支持的格式列表:asf、avi、flv、mov、mpg、mpeg、mp4、qt、ra、smil、swf、wmv、3g2、3gp、aif、aac、au、gsm、mid、midi、mov、mp3、m4a、snd、ra、ram、rm、wav、wma、bmp、html、pdf、psd、qif、qtif、qti、tif、tiff、xaml。这个插件甚至可以直接从 href 属性中的文件扩展名检测文件类型。