慕少3449830 ·HTML 多媒體
本章介紹 HTML 中的多媒體。多媒體是計算機中用于人機進行實時交互的媒介和互動方式，其中包括圖片、文字、音頻、視頻、動畫等。之前的章節(jié)已經(jīng)介紹了圖片和文本元素，本章主要介紹音頻和視頻相關的元素
1. object
object 元素用于定義一個網(wǎng)頁插件，使用該元素可以在網(wǎng)頁中嵌入多媒體，支持的插件類型有圖形、音頻、視頻、java applets、ActiveX、PDF、flash。不過在 HTML5 標準之前，主流瀏覽器中只有 IE3.0 之后的版本支持
<object classid="clsid:F08DF954-8592-11D1-B16A-00C0F0283628" id="Slider1"
width="100" height="50">
<param name="BorderStyle" value="1" />
<param name="MousePointer" value="0" />
<param name="Enabled" value="1" />
<param name="Min" value="0" />
<param name="Max" value="10" />
</object>
雖然 object 標簽的出現(xiàn)是用于取代 HTML 中的多媒體相關的標簽，但是由于目前只有 IE 瀏覽器兼容性較好，所以未能實現(xiàn)初衷。雖然在手冊或者文獻中未能找到其他瀏覽器不兼容的原因，但是作者猜想是因為一方面 object 的屬性太多導致入門門檻較高，一方面互聯(lián)網(wǎng)朝向細分化方向發(fā)展而技術也在細分化，所以這種大一統(tǒng)的技術解決方案不太受主流大廠的接受，進而導致各大瀏覽器廠商認可度不高（具體原因以官方手冊為準）。雖然兼容性不好，但是在 IE 低版本中 object 使用頻率不低，主要用于 flash
1.1 archive 屬性
定義對象相關的檔案文件的 URL 列表
1.2 classid 屬性
定義嵌入網(wǎng)頁的插件的自身的 id 值，這個值可以是 flash 的對象id或者 Java 的類的classid
瀏覽器根據(jù)這個 classid 可以找到插件的源代碼
1.3 codebase 屬性
這是一個可選的屬性，定義一個 URL 指向 classid 屬性所引用的對象的代碼
<object classid="clock.class" codebase="http://www.baidu.com/classes/">
</object>
codebase 相當于 源代碼的域名，根據(jù) codebase+classID 瀏覽器可以準確定位插件的源代碼。
1.4 codetype 屬性
類似于 type 屬性，用來標識 object/applet 插件的 mime 類型。
<object codebase="clock.class" codetype="application/java">
</object>
上述代碼定義了一個 Java 類型的插件。
1.5 data 屬性
用于指定用于對象處理的 URL，該屬性和 classID 類似，只不過是當 object 用于定義一個 多媒體（例如圖片）格式的時候，data 用于表示圖片的源路徑，等價于 img 標簽的 src 屬性，不同的是 img 標簽的 src 屬性只能用于圖像類型，data 則可用于幾乎任意的多媒體文件類型。
<object codebase="clock.class" codetype="application/jpeg" data=''>
</object>
1.6 declare 屬性
通常用于當 object 插件是 flash 或者 applet 時，定義插件編程語言的前置聲明，不參與展示效果。
1.7 form 屬性
定義 object 元素對應的表單的id，目前沒有主流瀏覽器支持 form 屬性。
1.8 standby 屬性
定義當 object 在加載的過程中，瀏覽器的 object 位置上顯示的文本，此屬性類似于 img 標簽中的 alt 屬性。
1.9 height width 屬性
定義插件的高度和寬度。
1.10 hspace vspace 屬性
定義插件的周圍的空白。
2. embed
這個標簽的作用基本上和 object 相似，都是用來嵌入插件，不同的是 object 只有 IE 內(nèi)核的瀏覽器支持比較完善，而非IE內(nèi)核的瀏覽器則對 embed 支持度較高。embed 可以嵌入到 object 標簽內(nèi)，當瀏覽器不支持 object 時會自動加載 object 內(nèi)的元素來渲染。
3. param
該標簽用于為 object 插件定義運行時參數(shù)，控制插件的運行方式。
<object classid="clsid:F08DF954-8592-11D1-B16A-00C0F0283628" id="test">
<param name="BorderStyle" value="1" />
<param name="MousePointer" value="0" />
<param name="Enabled" value="1" />
<param name="Min" value="0" />
<param name="Max" value="10" />
</object>
上述定義的每個 param 相當于一個插件的控制參數(shù)，name 對應參數(shù)的名稱，value 對應參數(shù)的值，根據(jù)具體的插件的不同而不同。
4. audio
audio 是 HTML5 中的新標簽，用于播放音頻流，格式如下：
<audio src="test.wav">
您的瀏覽器不支持 audio 標簽。 <!-- 定義瀏覽器不支持該標簽時所展示的內(nèi)容-->
</audio>
上述代碼相當于在瀏覽器中定義了一個播放器，展示效果如下
4.1 autoplay屬性
當定義了該屬性時，音頻會立即播放。
4.2 controls屬性
該屬性用于定義是否向用戶展示播放按鈕，如果未定義這個屬性，則瀏覽器默認不顯示任何播放器的控件（播放、音量、進度等）?？丶梢酝ㄟ^ audio 提供的事件，通過 div+css+JavaScript 自定義實現(xiàn)。
4.3 loop屬性
該屬性定義時，表示音頻是否會重復循環(huán)播放。
4.4 muted屬性
當該屬性被定義是，音頻默認播放時是以靜音方式播放。
4.5 preload屬性
該屬性定義音頻加載的方式，有3個可選值（auto 自動加載 meta 只加載元數(shù)據(jù) none 手動加載）。當設置了 autoplay 時，該屬性不生效。
4.6 src屬性
定義音頻的 URL。
5. source
該標簽用于定義音頻/視頻播放器的源文件，為了兼容不同的瀏覽器對不同的音頻類型的支持，例如：
<audio>
<source src="test.ogg" type="audio/ogg"> <!-- 定義Ogg類型的音頻 -->
<source src="test.mp3" type="audio/mpeg"> <!-- 定義MP3類型的音頻-->
</audio>
上述音頻播放器，放到不支持 Ogg 文件的瀏覽器時，會自動加載 MP3 文件。
6. video
這個標簽用于定義視頻播放器，大部分屬性和 audio 類似，是 HTML5 中新增的標簽。
<video src="/i/movie.ogg" controls="controls">
your browser does not support the video tag
</video>
視覺效果如下
7. 兼容性
HTML中定義多媒體元素不是很復雜，但是難點在于各種瀏覽器的兼容性問題，例如：
- iPhone iPad 不支持 flash
- 低版本 IE 不支持 embed
- 非 IE 瀏覽器不完全支持 object
- 音視頻標簽 audio video 僅支持 HTML5 標準
- 多媒體文件格式在不同瀏覽器的支持程度不同
- 多媒體文件格式在不同的硬件上的支持程序也不同
所以說如果你需要大量使用多媒體技術，那么必須要非常熟悉多媒體技術在瀏覽器上的兼容性問題才行
8. 小結
本章介紹了多媒體技術在 HTML4 和 HTML5 中的使用方式，以及在不同的瀏覽器中的兼容性問題
2025 imooc.com All Rights Reserved |