在WEB標(biāo)準(zhǔn)中嵌入Flash的最佳方法_Div+CSS教程
教程Tag:暫無(wú)Tag,歡迎添加,賺取U幣!
Flash 嵌入的問(wèn)題論壇中有人問(wèn)了好多次,到底應(yīng)該怎么用,為什么通不過(guò)驗(yàn)證,要通過(guò)驗(yàn)證怎么辦等等等。
討論中也出現(xiàn)了不少的誤解,所以我單開(kāi)一個(gè)帖總結(jié)一下我所知道的東西,不想看我羅嗦的直接跳到最后看結(jié)論就可以了。
一、傳統(tǒng)的方法。
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0"
width="550" height="400" id="Untitled-1" align="middle">
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="mymovie.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#ffffff" />
<embed src="mymovie.swf" quality="high" bgcolor="#ffffff" width="550"
height="400" name="mymovie" align="middle" allowScriptAccess="sameDomain"
type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
這方法是使用 object 和 embed 標(biāo)簽來(lái)嵌入,細(xì)心的會(huì)發(fā)現(xiàn),object 的很多參數(shù)和 embed 里面的很多屬性是重復(fù)的,為什么這樣做?為了瀏覽器兼容性,有的瀏覽器支持 object,有的支持 embed,這也是為什么要修改 Flash 的參數(shù)時(shí)兩個(gè)地方都要改的原因。這種方法是 Macromedia 一直以來(lái)的官方方法,最大限度的保證了 Flash 的功能,沒(méi)有兼容性問(wèn)題。但是它現(xiàn)在不那么好用了:
<object type="application/x-shockwave-flash
data="c.swf?path=movie.swf"
width="400" height="300">
<param name="movie"
value="c.swf?path=movie.swf" />
<img src="noflash.gif"
width="200" height="100" alt="" />
</object>
這方法沒(méi) embed 了,可以通過(guò)驗(yàn)證,是標(biāo)準(zhǔn)的嵌入 Flash 的方法,瀏覽器兼容性也不錯(cuò),看起來(lái)幾乎完美,不過(guò)還是有問(wèn)題的:
三、用JS嵌入的方法。
用JS嵌入就是各有各的嵌入方法了,有嵌得好的有嵌得不好的。有人用 document.write 直接寫(xiě),這法子說(shuō)實(shí)話不大好,感覺(jué) hack 成分多了,有點(diǎn)為了驗(yàn)證而驗(yàn)證的意思,而且沒(méi)有體現(xiàn)出什么 JS 的優(yōu)勢(shì)。我覺(jué)得一個(gè)好的 JS 嵌入腳本,在保證 Flash 應(yīng)有功能的基礎(chǔ)上,要發(fā)揮 JS 的優(yōu)勢(shì)應(yīng)該要有版本檢測(cè),要能很好解決可訪問(wèn)性問(wèn)題(也就是用戶在無(wú)法瀏覽 Flash 內(nèi)容或禁用 JS 的時(shí)候應(yīng)該如何處理的問(wèn)題),要易于重復(fù)使用。
我知道的比較常見(jiàn)的 JS 嵌入方法有以下幾個(gè)
四、我的結(jié)論。
現(xiàn)階段用 JS 嵌入 Flash 是最完美的方法,雖然這法子這也是由于瀏覽器的種種問(wèn)題而作出的妥協(xié)。
但它在保證 Flash 功能的前提下還利用 JS 提供了額外的好處,再者又已經(jīng)有人寫(xiě)了很完善的嵌入腳本可以方面地下載使用(推薦 SWFObject),我們還有什么理由不用它呢?
SWFObject 那網(wǎng)頁(yè)是英文的,這里寫(xiě)個(gè)簡(jiǎn)單的用法教程:
討論中也出現(xiàn)了不少的誤解,所以我單開(kāi)一個(gè)帖總結(jié)一下我所知道的東西,不想看我羅嗦的直接跳到最后看結(jié)論就可以了。
一、傳統(tǒng)的方法。
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0"
width="550" height="400" id="Untitled-1" align="middle">
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="mymovie.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#ffffff" />
<embed src="mymovie.swf" quality="high" bgcolor="#ffffff" width="550"
height="400" name="mymovie" align="middle" allowScriptAccess="sameDomain"
type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
這方法是使用 object 和 embed 標(biāo)簽來(lái)嵌入,細(xì)心的會(huì)發(fā)現(xiàn),object 的很多參數(shù)和 embed 里面的很多屬性是重復(fù)的,為什么這樣做?為了瀏覽器兼容性,有的瀏覽器支持 object,有的支持 embed,這也是為什么要修改 Flash 的參數(shù)時(shí)兩個(gè)地方都要改的原因。這種方法是 Macromedia 一直以來(lái)的官方方法,最大限度的保證了 Flash 的功能,沒(méi)有兼容性問(wèn)題。但是它現(xiàn)在不那么好用了:
- 無(wú)法通過(guò)驗(yàn)證,由于為了兼容性而嵌入的 embed 標(biāo)簽是不符合 W3C 的規(guī)范的。當(dāng)然,假如你不在乎什么規(guī)范不規(guī)范,另當(dāng)別論。
- 微軟由于種種原因,在 sp2 后限制了 IE 的 ActiveX 的使用模式,就是在頁(yè)面中的 ActiveX 有一個(gè)虛框,需要用戶點(diǎn)擊一次才能正常交互。Flash是作為一個(gè) ActiveX 嵌入到網(wǎng)頁(yè)中的,所以它也會(huì)受牽連,只有通過(guò) JS 嵌入 Flash 才能解決這個(gè)問(wèn)題。
- 沒(méi)有 Flash 版本檢測(cè),假如版本瀏覽器的flash插件版本不夠,或者不能正常顯示你的 swf 文件,或者會(huì)彈出一個(gè) ActiveX 的確認(rèn)安裝的框——這個(gè)框?qū)芏嘤脩魜?lái)說(shuō)是很恐怖的。
<object type="application/x-shockwave-flash
data="c.swf?path=movie.swf"
width="400" height="300">
<param name="movie"
value="c.swf?path=movie.swf" />
<img src="noflash.gif"
width="200" height="100" alt="" />
</object>
這方法沒(méi) embed 了,可以通過(guò)驗(yàn)證,是標(biāo)準(zhǔn)的嵌入 Flash 的方法,瀏覽器兼容性也不錯(cuò),看起來(lái)幾乎完美,不過(guò)還是有問(wèn)題的:
- 需要一個(gè) holder swf 來(lái)加載你的目標(biāo) swf 以保證 IE 中的 stream 能力,假如你需要通過(guò) flashvars 來(lái)傳參,或者和頁(yè)面的 JS 交互,會(huì)很麻煩。
- 同上面第二點(diǎn),ActiveX的虛框問(wèn)題。
- 繼續(xù)同上沒(méi)有版本檢測(cè)
- 還是有少數(shù)用戶代理(比如一些版本的 safari 和一些屏幕閱讀器)不認(rèn)這種方式,有 bug。
三、用JS嵌入的方法。
用JS嵌入就是各有各的嵌入方法了,有嵌得好的有嵌得不好的。有人用 document.write 直接寫(xiě),這法子說(shuō)實(shí)話不大好,感覺(jué) hack 成分多了,有點(diǎn)為了驗(yàn)證而驗(yàn)證的意思,而且沒(méi)有體現(xiàn)出什么 JS 的優(yōu)勢(shì)。我覺(jué)得一個(gè)好的 JS 嵌入腳本,在保證 Flash 應(yīng)有功能的基礎(chǔ)上,要發(fā)揮 JS 的優(yōu)勢(shì)應(yīng)該要有版本檢測(cè),要能很好解決可訪問(wèn)性問(wèn)題(也就是用戶在無(wú)法瀏覽 Flash 內(nèi)容或禁用 JS 的時(shí)候應(yīng)該如何處理的問(wèn)題),要易于重復(fù)使用。
我知道的比較常見(jiàn)的 JS 嵌入方法有以下幾個(gè)
- SWFObject
- UFO - Unobtrusive Flash Objects
- Macomedia(現(xiàn)在是Adobe了..)提供的腳本[這里]和[這里]。
- IE中沒(méi)有討厭的虛框問(wèn)題了。
- 提供了完善的版本檢測(cè)功能,假如版本不夠則顯示其他東西,比如圖片或文字。
- 易于使用,只要在頁(yè)面頭加載一個(gè) .js 文件,然后 HTML 寫(xiě)一個(gè)容器,里面放普通的文本或圖片(用于無(wú)法顯示 Flash 時(shí)顯示),最后用腳本來(lái)替換這個(gè)元素里面的內(nèi)容為 Flash。
- 可以通過(guò)驗(yàn)證——當(dāng)然這個(gè)不是重點(diǎn),只是順帶效果罷了。
四、我的結(jié)論。
現(xiàn)階段用 JS 嵌入 Flash 是最完美的方法,雖然這法子這也是由于瀏覽器的種種問(wèn)題而作出的妥協(xié)。
但它在保證 Flash 功能的前提下還利用 JS 提供了額外的好處,再者又已經(jīng)有人寫(xiě)了很完善的嵌入腳本可以方面地下載使用(推薦 SWFObject),我們還有什么理由不用它呢?
SWFObject 那網(wǎng)頁(yè)是英文的,這里寫(xiě)個(gè)簡(jiǎn)單的用法教程:
- 下載它的.js文件,在這里: http://blog.deconcept.com/swfobject/swfobject1-4.zip (假如鏈接失效可能是版本有更新,請(qǐng)用上面給出的地址去主頁(yè)下載最新版本)
- 在你的 HTML 頁(yè)面頭部<head>區(qū)嵌入這個(gè)腳本文件:<script type="text/javascript" src="swfobject.js"></script>
- 在你的 HTML 中寫(xiě)一個(gè)用來(lái)放 Flash 的容器,比如<div>,并隨便給一個(gè) id 比如 flashcontent。然后在里面放上你的替換內(nèi)容。
<div id="flashcontent">
這里放替換內(nèi)容,用來(lái)在 Flash 無(wú)法顯示時(shí)顯示。
</div> - 使用腳本替換這個(gè)內(nèi)容:
<script type="text/javascript">
var so = new SWFObject("movie.swf", "mymovie", "200", "100", "7", "#336699");
//參數(shù)意思: 地址,F(xiàn)lash 的 id(不是容器的 id),寬,高,版本需求,背景顏色
//這是最基本的,假如你要高級(jí)的設(shè)置,就仔細(xì)翻翻說(shuō)明吧。
so.write("flashcontent");
</script>
這腳本可以寫(xiě)在 HTML 中也可以寫(xiě)在外部 .js 文件中。 - OK
相關(guān)Div+CSS教程:
- DIV+CSS設(shè)計(jì)的誤區(qū)
- CSS基礎(chǔ):常用CSS英文字體介紹
- IE6和IE7中border邊框斷線現(xiàn)象
- border:none;與border:0;的有什么不同?
- div+css下js對(duì)聯(lián)廣告不隨屏幕滾動(dòng)的解決方法
- HTML元素的ID和Name屬性的區(qū)別
- divcss教程:深入了解css的行高Line Height屬性
- CSS文檔流,塊級(jí)元素和內(nèi)聯(lián)元素
- 5個(gè)你該知道的CSS3新技術(shù)
- 用正則表達(dá)式替換a標(biāo)記href值
- 30個(gè)優(yōu)秀的CSS導(dǎo)航和按鈕設(shè)計(jì)教程
- css中px和em有什么區(qū)別
Div+CSS教程Rss訂閱Div+Css教程搜索
Div+CSS教程推薦
猜你也喜歡看這些
- CSS菜單:明快清新的格調(diào)闡述CSS當(dāng)前頁(yè)效果的實(shí)現(xiàn)
- CSS如何實(shí)現(xiàn)單行圖片與文字垂直居中?
- CSS布局實(shí)例:一個(gè)不錯(cuò)的表格樣式
- CSS實(shí)例:用fieldset、legend實(shí)現(xiàn)文字寫(xiě)在邊線上的效果
- 用css網(wǎng)站布局之十步實(shí)錄!(三)
- 10個(gè)很酷的涂鴉風(fēng)格國(guó)外網(wǎng)店設(shè)計(jì)展示
- DIV CSS網(wǎng)頁(yè)布局分析的兩個(gè)小例子
- DivCSS實(shí)例:一個(gè)效果很不錯(cuò)的CSS列表
- CSS實(shí)例:區(qū)分IE6、IE7、FF對(duì)HR解釋的CSShack
- CSS滑動(dòng)式條狀圖表如何實(shí)現(xiàn)?
- 相關(guān)鏈接:
- 教程說(shuō)明:
Div+CSS教程-在WEB標(biāo)準(zhǔn)中嵌入Flash的最佳方法。