符合 XHTML 标准和 HTML5 标准的 Flash 嵌入代码

苹果设备的不支持让Adobe Flash的日子越来越不好过,不过Flash被HTML5替代的进程依然是长路漫漫,我们需要做的是在学习HTML5的同时继续用好Flash。

今天闲来无事继续博客的 W3C HTML标准验证,大多数不符合项都是Flash导致的,于是参照建议学习并改正,一起来学习吧。

传统的嵌入代码

<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=”400″ height=”300″ id=”movie” align=””>
<param name=”movie” value=”movie.swf”>
<embed src=”movie.swf” quality=”high” width=”400″ height=”300″ name=”movie” align=”” type=”application/x-shockwave-flash”  pluginspage=”http://www.macromedia.com/go/getflashplayer”>
</object>

同时使用了<object>元素和<embed>元素嵌入Flash,很长的代码,感觉上有点累赘。<object>元素用来支持IE浏览器,<embed>元素用来支持IE外的其他浏览器,这样的代码可以在多浏览器中兼容,不过,如果你想通过W3C的各种HTML标准的验证肯定是不行的。

不符合XHTML1.0的<embed> 元素

<embed width=”400″ height=”300″ align=”middle” type=”application/x-shockwave-flash” allowfullscreen=”true” allowscriptaccess=”sameDomain” quality=”high” src=”movie.swf”></embed>

<embed>元素由 Netscape 创建,用来支持在网页中嵌入播放器插件,虽然现在的大多数浏览器都支持,但是 <embed> 元素却不符合XHTML1.0标准

不过 <embed> 元素已经在 HTML5 标准中得到了支持,考虑到不能向下兼容,不推荐使用,但是国内主流视频网站如土豆、优酷提供的视频站外调用代码都是 <embed> 元素。

只支持IE浏览器的 <object> 元素用法

<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=”400″ height=”300″>
<param name=”movie” value=”movie.swf” />
</object>

XHTML1.0 标准和 HTML5 标准都支持<object>元素,在各浏览器中也可以很好的工作,但是 classid、codebase 等属性却只能IE浏览器下工作,也就是说,上面的代码在IE外的浏览器中就不能正常工作了。另外 classid、codebase 等属性也不在 HTML5 标准内(参考)。

兼容各浏览器且符合标准的 <object> 元素用法

没关系,在这里我们抛弃 classid 这个在IE浏览器的 ActiveX 设置,改用 type 属性和 data 属性,type 属性定义被规定在 data 属性中指定的文件中出现的数据的 MIME 类型。

<object type=”application/x-shockwave-flash” data=”movie.swf” width=”400″ height=”300″>
<param name=”movie” value=”movie.swf” />
</object>

使用这个嵌入Flash的代码不仅兼容各种浏览器,而且符合XHTML1.0标准和HTML5标准。

本文部分内容翻译于:http://www.alistapart.com/articles/flashsatay