HTML5(簡介、視頻、音頻、畫布)

HTML5(簡介、視頻、音頻、畫布)

HTML5目標是替換1999年所制定的HTML 4.01和XHTML 1.0標準，以期能在互聯網應用迅速發展的時候，使網絡標準達到匹配當代的網絡需求。HTML5將成爲HTML\XHTML\HTML DOM的新標準。

 

廣義論及HTML5時，實際指的是包括HTML、CSS和JavaScript在內的一套技術組合。它但願可以減小網頁瀏覽器對於須要插件的豐富性網絡應用服務（Plug-in-Based Rich Internet Application，RIA），例如：AdobeFlash、Microsoft Silverlight與Oracle JavaFX的需求，而且提供更多能有效增強網絡應用的標準集。

 

具體來講，HTML5添加了許多新的語法特徵，其中包括用於繪畫的 <canvas> 元素，用於媒介回放的< video >和 <audio >元素，這些元素是爲了更容易的在網頁中添加和處理多媒體和圖片內容而添加的。其它新的元素如<section>、<article>、<nav>、<header>和<footer>則是爲了豐富文檔的數據內容。此外還有新的表單控件，好比 <calendar>、<date>、<time>、<email>、<url>、<search>。同時也有一些屬性和元素被移除掉了，一些元素，像<a>、<cite>和<menu>被修改，從新定義或標準化了。

 

HTML5 提供了展現視頻的標準。當前video元素支持三種視頻格式：ogg、MPEG四、WebM。

 

在HTML5中添加視頻：

<video width="320" height="240" controls="controls">

  <source src="movie.ogg" type="video/ogg">

  <source src="movie.mp4" type="video/mp4">

Your browser does not support the video tag.

</video>

 

<video>屬性標籤：

autoplay：自動播放視頻。

controls：向用戶顯示控件，好比播放、暫停和音量按鈕。

height： 設置播放器的高度。

width：設置播放器的寬度。

loop：循環播放。

preload：視頻預加載。

src：要播放的視頻URL。

 

<video>的方法、屬性及事件

play()              currentSrc         play

pause()          currentTime       pause

load()             videoWidth        progress

canPlayType  videoHeight       error

                      duration             timeupdate

                      ended                 ended

                      error                   abort

                      paused               empty

                      muted                emptied

                      seeking              waiting

                      volume               loadedmetadata

                      height

                      width  

 

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

 

 

HTML5 提供了播放音頻的標準。當前，audio 元素支持三種音頻格式：Ogg Vorbis、MP三、Wav。

 

在 HTML5 中播放音頻：

<audio controls="controls">

  <source src="song.ogg" type="audio/ogg">

  <source src="song.mp3" type="audio/mpeg">

Your browser does not support the audio tag.

</audio>

<audio>屬性標籤和<video>同樣。

 

canvas 元素用於在網頁上繪製圖形。

 

向 HTML5 頁面添加 canvas 元素：

規定元素的 id、寬度和高度：

<canvas id="myCanvas" width="200" height="100"></canvas>

 

canvas 元素自己是沒有繪圖能力的。全部的繪製工做必須在 JavaScript 內部完成：

<script type="text/javascript">

var c=document.getElementById("myCanvas");

var cxt=c.getContext("2d");

cxt.fillStyle="#FF0000";

cxt.fillRect(0,0,150,75);

</script>

 

JavaScript 使用 id 來尋找 canvas 元素：

var c=document.getElementById("myCanvas");

 

而後，建立 context 對象：

var cxt=c.getContext("2d");

 

getContext("2d") 對象是內建的 HTML5 對象，擁有多種繪製路徑、矩形、圓形、字符以及添加圖像的方法。

下面的兩行代碼繪製一個紅色的矩形：

 

cxt.fillStyle="#FF0000";

cxt.fillRect(0,0,150,75);

 

fillStyle 方法將其染成紅色，fillRect 方法規定了形狀、位置和尺寸。

參數 (0,0,150,75)。從左上角開始 (0,0)，在畫布上繪製 150x75 的矩形。