首頁 > web前端 > html教學 > 使用flash插件來呼叫pc的攝影機如何將它嵌入到TML頁面中_HTML/Xhtml_網頁製作

使用flash插件來呼叫pc的攝影機如何將它嵌入到TML頁面中_HTML/Xhtml_網頁製作

WBOY
發布: 2016-05-16 16:37:05
原創
1533 人瀏覽過
前言

之所以寫這篇文章,主要是因為組長給提的一個新的需求——使用瀏覽器調用電腦的攝像頭,來實現即時拍照的功能。在網路上查了很多資料,由於這樣或那樣的原因,最後選擇了使用flash插件來呼叫pc的攝影機。當然,這個需求是基於B/S架構的,因此,就在想怎麼把它嵌入到前端的HTML頁面中。

題外話

當然,這裡還沒有考慮到封裝,主要是先以實現為目的,後續工作再根據業務進行抽象,封裝成通用的組件。好了,廢話不多說,看重點。

嵌入插件

使用object 和embed 標籤

代碼展示

複製程式碼
程式碼如下:


codebase="http://fpdownload. /pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0"
width="490" height="390" id="Untitled-1" align="middle">




type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" / >



這個方法用到的是Object 和Embed 標籤,可以看到object 的很多參數和embed 裡面的很多屬性是重複的。瀏覽器相容性,有的瀏覽器支援 object,有的支援 embed,這也是為什麼要修改 Flash 的參數時兩個地方都要改的原因。這種方法是 Macromedia 一直以來的官方方法,最大限度的保證了 Flash 的功能,沒有相容性問題。

但現在來看,它還是存在很大問題的。

首先,無法通過驗證,由於為了相容性而嵌入的 embed 標籤是不符合 W3C 的規範的。當然,如果你不在乎什麼規範不規範,另當別論。

其次,微軟由於種種原因,在 sp2 後限制了 IE 的 ActiveX 的使用模式,就是在頁面中的 ActiveX 有一個虛框,需要用戶點擊一次才能正常互動。 Flash是作為一個 ActiveX 嵌入到網頁中的,所以它也會被牽連,只有透過 JS 嵌入 Flash 才能解決這個問題。

再,沒有Flash 版本檢測,如果版本瀏覽器的flash插件版本不夠,或者不能正常顯示你的swf 文件,或者會彈出一個ActiveX 的確認安裝的框——這個框對很多用戶來說是很恐怖的。

只使用object 標籤

代碼展示

複製代碼
代碼如下:




使用flash插件來呼叫pc的攝影機如何將它嵌入到TML頁面中_HTML/Xhtml_網頁製作width="550" style="max-width:90%" alt="" />
object>


這個方法只用到了Object 標籤,其實也就是Flash satay。嵌入Flash 的方法,瀏覽器相容性也不錯,看起來幾乎完美,不過還是有問題的。你需要透過flashvars 來傳參,或者和頁面的JS 交互,會很麻煩。
再一次,有些低版的瀏覽器(如低版的Safari等)不認同這種方式,對它的相容性不好。 🎜>
程式碼展示





複製程式碼
程式碼如下:





這種方法只用到了Embed 標籤,對比效果來說,還是很不錯的,瀏覽器的兼容性也還不錯,都是可以載入的。當然,由於 embed 標籤是不符合 W3C 的規範的,所以也不建議使用這種方法。

使用JavaScript嵌入

使用 JS 來載入 Flash 插件,網路上已經有很多的方法了,而且也有很多不錯的 JS 插件供大家選擇。我這裡只拿 SWFObject 來簡單的介紹一下。

首先,你需要下載一個 SWFObject 插件包,該插件包中包含一個 JS 腳本,這個是你需要引入的腳步文件。還包括兩個 html 的例子,大家可以模仿一下。當然,你也可以去 SWFObject 的網站了解一下,網址請點 這裡 。

程式碼展示

複製程式碼
程式碼span style="font-family:Microsoft YaHei;">






複製程式碼
程式碼如下:





Alternative content h1>

Get Adob​​​​e Flash player











效果圖
 
結束語
對比這幾種方式,我更推薦使用JS 嵌入的方式來加載Flash 插件,這種方式不僅能保證實現Flash 的所有功能,同時在各瀏覽器的兼容性方面也都表現不錯,並且JS 還可以提供更多的擴展功能,更主要是可以被更多的人復用,減少不必要的冗餘代碼。 外掛程式下載位址:
SWFObject
相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板