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

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

May 16, 2016 pm 04:37 PM
flash插件

前言

之所以寫這篇文章,主要是因為組長給提的一個新的需求——使用瀏覽器調用電腦的攝像頭,來實現即時拍照的功能。在網路上查了很多資料,由於這樣或那樣的原因,最後選擇了使用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
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

谷歌瀏覽器不支援flash插件怎麼辦 谷歌瀏覽器不支援flash插件怎麼辦 Mar 05, 2024 pm 10:40 PM

谷歌瀏覽器不支援flash插件怎麼辦?如今不少用戶都在使用谷歌瀏覽器,部分用戶在使用谷歌瀏覽器的是偶會彈出提示“AdobeFlashPlayer已被屏蔽”頁面,這種情況下我們需要在設置里手動打開FlashPlayer,那麼具體的操作方法是什麼呢?相信大家都想知道吧。下面就請小編跟大家說說解決不支援flash外掛問題方法介紹,有需要的朋友趕快來學習一下吧。解決不支援flash插件問題方法介紹1、點擊Google瀏覽器右上角圖標,如圖所示。 2、在跳出的對話框中點選設置,如圖所示。 3.點擊隱私設定和安全性,然

Edge瀏覽器flash外掛程式無法自動播放影片怎麼辦? Edge瀏覽器flash外掛程式無法自動播放影片怎麼辦? Mar 14, 2024 am 08:10 AM

我們很多用戶在使用Edge瀏覽器的時候都安裝了flash插件,但是還是無法自動播放視頻,需要用戶手動在進行操作,那麼要怎麼設置才能夠自動播放,針對這個問題,本期小編就來分享兩種操作方法,希望今天的軟體教學內容能幫助各位解決問題。  Edge瀏覽器flash插件無法自動播放解決方法:  方法一:  1、雙擊進入軟體,點選頁面中的「...」按鈕。  2、在下方給出的選項清單中選擇「設定」。  3、點選新介面中的「進階」選項。  4、

QQ瀏覽器提示未安裝flash外掛程式怎麼辦 QQ瀏覽器提示未安裝flash外掛程式怎麼辦 Mar 13, 2024 pm 04:58 PM

QQ瀏覽器提示未安裝flash外掛程式怎麼辦? flash插件是能夠支援大家在瀏覽器裡查看圖片和影片的,一般情況下瀏覽器裡自帶有flash插件,不過最近有不少QQ瀏覽器用戶在使用的時候頁面提示未安裝flash插件,導致很多內容無法正常顯示,那麼我們該如何解決這個問題。接下來小編就帶給大家QQ瀏覽器未安裝flash外掛解決方案,希望能對大家有幫助。 QQ瀏覽器未安裝flash插件解決方案1、開啟QQ瀏覽器,如圖點擊右上角的「選單」圖標,如下圖所示。 2、這時會彈出一個二級選單,將滑鼠移到「工具」這一

谷歌瀏覽器如何安裝flash插件 谷歌瀏覽器如何安裝flash插件 Mar 23, 2024 am 11:31 AM

谷歌瀏覽器如何安裝flash插件?在大部分瀏覽器中都需要安裝flash插件,這個插件支援圖片和影片等多媒體的閱讀,用戶想要在谷歌瀏覽器裡查看圖片或影片就需要安裝flash插件,不少用戶對這個插件並不了解,具體在谷歌瀏覽器裡如何安裝很多人都不知道。接下來小編就帶給大家Google瀏覽器安裝flash外掛操作步驟,有需要的朋友不妨來看看了解一下。 Google瀏覽器安裝flash外掛程式操作步驟1、我們在百度搜尋框中輸入adobeflashplayer官方下載,我們點擊可以下載的連結進去(如圖)。 2、我們在點選「

火狐瀏覽器怎麼安裝flash插件 火狐瀏覽器怎麼安裝flash插件 Jan 30, 2024 pm 10:57 PM

火狐瀏覽器怎麼安裝flash插件?我們要如何在火狐瀏覽器裡安裝flash插件,具體的方法步驟是什麼!我們在使用火狐瀏覽器觀看電影,玩遊戲的時候,網頁都會提示我們要安裝flash插件才能正常使用,那麼我們應該如何安裝這個插件呢,具體的操作方法是什麼,小編下面正整理了火狐瀏覽器安裝flash插件方法步驟,如果你不會操作的話,就跟著我我往下看吧!火狐瀏覽器怎麼安裝flash插件1、百度搜尋adobeflashplayer官網,點選進入,如下圖所示2、進入flash插件安裝頁面,點選【立即安裝】3、、f

如何在Edge瀏覽器中安裝Flash插件? 如何在Edge瀏覽器中安裝Flash插件? Jan 30, 2024 am 11:15 AM

edge瀏覽器怎麼安裝flash插件?在用戶使用瀏覽器上網過程中,flash插件發揮很大的作用,它能夠幫助用戶載入圖片、影片等等的內容,幫助用戶更方便的上網。 edge瀏覽器為使用者提供了新增插件的功能,那麼使用者該如何在edge瀏覽器上方新增flash插件呢?沒有操作過的用戶也許不懂,那麼今天小編就為大家帶來了非常詳細的微軟瀏覽器安裝flash插件技巧,有興趣的話就來一起學習吧。微軟瀏覽器安裝flash插件技巧1、進入免費的微軟瀏覽器,點擊頁面頂部工具列中的三個點圖標,如下圖所示。 2、在下方給出的

edge瀏覽器flash外掛程式怎麼啟用? edge瀏覽器flash外掛程式啟用教學 edge瀏覽器flash外掛程式怎麼啟用? edge瀏覽器flash外掛程式啟用教學 Mar 13, 2024 pm 06:30 PM

  edge瀏覽器怎麼啟用flash?在使用edge瀏覽器的時候如果想要啟用flash該怎麼操作?使用edge瀏覽器看電視玩遊戲的時候,都需要用到flash這個功能,小編下面整理了edge瀏覽器啟用flash具體步驟,有需要的小夥伴一起往下看看吧。  啟用方法  1、進入瀏覽器,點選頁面上方工具列右側的三個點圖示。  2、接著在下方給出的選項選單中選擇「設定」。  3、進入新介面後,點選「預設瀏覽器」選項,然後在右側找到「允許在Intern

火狐瀏覽器沒有flash插件怎麼辦 火狐瀏覽器沒有flash插件怎麼辦 Apr 03, 2024 pm 01:40 PM

火狐瀏覽器沒有flash插件怎麼辦?火狐瀏覽器具有非常穩定的特性,不少用戶喜歡使用這款瀏覽器辦公,我們在瀏覽器裡瀏覽圖片或者視頻的時候需要flash插件支持,部分用戶在查看圖片的時顯示沒有flash插件,這種情況我們需要在火狐瀏覽器裡安裝一個flash插件。接下來小編就帶給大家火狐瀏覽器解決沒有flash插件問題詳細教程,有興趣的朋友快來看看。火狐瀏覽器解決沒有flash插件問題詳細教程首先,您需要將Firefox瀏覽器點開,然後在頁面的右上角的地方將【擴展】圖標按鈕​​點擊打開,接著進入到擴展

See all articles