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:圖片、音樂和視頻