HTML5：圖片、音樂和視頻
圖片、音樂和視頻
一、圖片
1、屬性
|
屬性 |
說明 |
|
alt |
規定圖像的替代文本。 |
|
src |
規定顯示圖像的 URL |
|
align |
規定如何根據周圍的文本來排列圖像。 |
|
border |
定義圖像周圍的邊框。 |
|
height |
定義圖像的高度。 |
|
hspace |
定義圖像左側和右側的空白。 |
|
ismap |
將圖像定義為服務器端圖像映射。 |
|
longdesc |
指向包含長的圖像描述文檔的 URL。 |
|
usemap |
將圖像定義為客戶器端圖像映射。 |
|
vspace |
定義圖像頂部和底部的空白。 |
|
width |
設置圖像的寬度。 |
2、例
<img src=“images/logo.png” alt=‘LOGO” title=“logo” />
二、音樂
1、屬性
|
屬性 |
描述 |
|
autoplay |
如果指定這個布爾值屬性，只要沒停止加載數據，音頻就會立刻自動開始播放。 |
|
autobuffer |
如果指定這個布爾值屬性，即使沒有設置自動播放，音頻也會自動開始緩沖。 |
|
controls |
如果指定這個屬性，表示允許用戶控制音頻播放，包括音量控制，快進以及暫停/恢復播放。 |
|
loop |
如果指定這個布爾值屬性，表示允許音頻播放結束後自動回放。 |
|
preload |
這個屬性指定加載頁面時加載音頻並準備就緒。如果指定自動播放則忽略。 |
|
src |
要嵌入的音頻 URL。可選，可以在音頻塊裏面使用 <source> 元素指定要嵌入的音頻來替代。 |
2、例
<audio controls=“controls”> <!--不自動播放--->
<source src="media/蘭色天際.mp3" type="audio/mp3" />
</audio>
三、視頻
1、屬性
|
屬性 |
描述 |
|
autoplay |
如果指定這個布爾值屬性，只要沒有停止加載數據，視頻就會立刻開始自動播放。 |
|
autobuffer |
如果指定這個布爾值屬性，即使沒有設置自動播放，視頻也會自動開始緩沖。 |
|
controls |
如果指定這個屬性，就允許用戶控制視頻播放，包括音量控制，快進，暫停或者恢復播放。 |
|
height |
這個屬性以 CSS 像素的形式指定視頻顯示區域的高度。 |
|
loop |
如果指定這個布爾值屬性，表示允許播放結束後自動回放。 |
|
preload |
指定這個屬性，視頻會在載入頁面時加載並準備就緒。如果指定自動播放則忽略。 |
|
poster |
這是一個圖像 URL，顯示到用戶播放或快進。 |
|
src |
要嵌入的視頻 URL。可選，可以在 video 塊中使用 <source> 元素替代來指定要嵌入的視頻。 |
|
width |
這個屬性以 CSS 像素的形式指定視頻顯示區域的寬度。 |
2、例
<video width="400" autoplay="" controls=“controls”> <!--自動播放--->
<source src="media/v8.mp4"type="video/mp4" />
</video>
三、處理媒體事件
HTML5 audio 和 video 標簽可以用多個屬性利用 JavaScript 控制各種控制功能：
|
事件 |
描述 |
|
abort |
播放中止時生成這個事件。 |
|
canplay |
足夠的數據可用並且媒體可以播放時生成這個事件。 |
|
ended |
播放完成時生成這個事件。 |
|
error |
發生錯誤時生成這個事件。 |
|
loadeddata |
媒體第一幀載入完成時生成這個事件。 |
|
loadstart |
開始加載媒體時生成這個事件。 |
|
pause |
播放暫停時生成這個事件。 |
|
play |
播放開始或者恢復時生成這個事件。 |
|
progress |
定期通知媒體下載進度時生成這個事件。 |
|
ratechange |
播放速度改變時生成這個事件。 |
|
seeked |
快進操作完成時生成這個事件。 |
|
seeking |
快進操作開始時生成這個事件。 |
|
suspend |
媒體加載被暫停時生成這個事件。 |
|
volumechange |
音頻音量變化時生成這個事件。 |
|
waiting |
請求操作（比如播放）被延遲，等待另一個操作完成（比如快進）時生成這個事件。 |
HTML5：圖片、音樂和視頻