html5 筆記

• 簡介
• video 視頻
• source 媒體資源
• audio 音頻

簡介

HTML 5 的一些規則

1. 新特性應該基於 HTML、CSS、DOM 以及 JavaScript。
2. 減小對外部插件的需求（好比 Flash）
3. 更優秀的錯誤處理
4. 更多取代腳本的標記
5. HTML 5 應該獨立於設備
6. 開發進程應對公衆透明

新特性

1. 用於繪畫的 canvas 元素
2. 用於媒介回放的 video 和 audio 元素
3. 對本地離線存儲的更好的支持
4. 新的特殊內容元素，好比 article、footer、header、nav、section
5. 新的表單控件，好比 calendar、date、time、email、url、search

瀏覽器支持

最新版本的 Safari、Chrome、Firefox 以及 Opera 支持某些 HTML 5 特性。Internet Explorer 9 將支持某些 HTML 5 特性。

---

video 視頻

用於顯示視頻資源

示例

<video autoplay controls loop src="http://vjs.zencdn.net/v/oceans.mp4" >
      你的瀏覽器不支持 video 標籤
  </video>
複製代碼

<video> 與 </video> 之間插入的內容是供不支持 video 元素的瀏覽器顯示的。

<video>標籤能夠插入多個<source>標籤。<source>標籤能夠連接不一樣的視頻文件。瀏覽器將使用第一個可識別的格式。

<video autoplay controls loop >
    <source type="video/mp4" src="http://vjs.zencdn.net/v/oceans.mp4" >
    <source type="video/ogg" src="http://vjs.zencdn.net/v/oceans.ogg" >
    你的瀏覽器不支持 video 標籤
  </video>
複製代碼

video 標籤的屬性

屬性	說明	值
src	指定視頻的url	(有效的視頻url, 支持Ogg, MPEG 4, WebM 格式)
poster	視頻封面,視頻加載成功以前顯示	(有效的圖片url)
autoplay	視頻加載後自動播放	autoplay
preload	視頻是否預加載。若是設置了`autoplay`屬性, 則忽略該設置,使用默認值`auto`	auto(默認值):所有預加載 none:不進行預加載,點擊播放才加載。 metadata:部分預加載。
controls	顯示播放按鈕,音量按鈕等控件	controls
loop	循環播放	loop
width/height	寬/高	就是寬高的用法啦

---

source 媒體資源

爲媒體元素（好比 <video> 和 <audio>）定義媒體資源。 設置多個source瀏覽器依次識別資源直到找到可讀取的媒體資源,以此可兼容不一樣瀏覽器。如果有的ie依然不支持能夠在source後面使用flash標籤。

示例

audio:

<audio controls>
    <source src="pretend-to-have-audio.ogg" type="audio/ogg">
    <source src="pretend-to-have-audio.mp3" type="audio/mpeg">
    您的瀏覽器不支持 audio 標籤
</audio>
複製代碼

video:

<video autoplay controls loop >
    <source type="video/mp4" src="pretend-to-have-video.mp4" >
    <source type="video/ogg" src="pretend-to-have-video.ogg" >
    你的瀏覽器不支持 video 標籤
  </video>
複製代碼

注意:

• 當 audio 和video 標籤設置了src屬性時，裏面的source標籤無效。
• source 標籤自己不表明任何含義, 單獨使用不會出現任何效果

source 標籤的屬性

屬性	說明	值
src	媒體文件的 URL	(有效的媒體url)
type	媒體文件的類型	(有效的圖片)
media	指定媒體資源的類型(幾乎全部的主流瀏覽器都不支持 media 屬性。)

---

audio 音頻

用於播放聲音文件或者音頻流

示例

<audio src="pretend-to-have-audio.mp3" controls="controls">
  您的瀏覽器不支持 audio 標籤
  </audio>
複製代碼

或者

<audio controls="controls">
    <source src="pretend-to-have-audio.ogg" type="audio/ogg">
    <source src="pretend-to-have-audio.mp3" type="audio/mpeg">
    Your browser does not support the audio tag.
</audio>
複製代碼

audio標籤的屬性

屬性	說明	值
src	指定音頻的URL	(有效的音頻URL,支持Ogg Vorbis、MP三、Wav等格式)
autoplay	音頻加載後自動播放	autoplay
preload	音頻是否預加載。若是設置了`autoplay`屬性, 則忽略該設置,使用默認值`auto`	auto(默認值):所有預加載 none:不進行預加載,點擊播放才加載。 metadata:部分預加載。
controls	顯示播放按鈕,音量按鈕等控件	controls
loop	循環播放	loop

canvas 圖形

canvas 經過js繪製圖形。 canvas 標籤自己沒有繪圖能力，標籤提供一個畫布，使用js 來控制畫布內的每個像素。

---

參考：
HTML5從入門到精通
HTML 5 video 視頻標籤全屬性詳解