HTML5學習第二節 HTML5新元素的介紹

首先要檢查你的瀏覽器是否支持HTML5，主要的JS代碼如下：

function check_html5()
{
if(!!document.createElement('video').canPlayType)
  {
  var vidTest=document.createElement("video");
  oggTest=vidTest.canPlayType('video/ogg; codecs="theora, vorbis"');
  if (!oggTest)
    {
    h364Test=vidTest.canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"');
    if (!h364Test)
      {
      document.getElementById("checkVideoResult").innerHTML="Sorry. No video support."
      }
    else
      {
      if (h364Test=="probably")
        {
        document.getElementById("checkVideoResult").innerHTML="Yes! Full support!";
        }
      else
        {
        document.getElementById("checkVideoResult").innerHTML="Well. Some support.";
        }
      }
    }
  else
    {
    if (oggTest=="probably")
      {
      document.getElementById("checkVideoResult").innerHTML="Yes! Full support!";
      }
    else
      {
      document.getElementById("checkVideoResult").innerHTML="Well. Some support.";
      }
    }
  }
else
  {
  document.getElementById("checkVideoResult").innerHTML="Sorry. No video support."
  }
}

一、HTML5下的視頻引用方式

通過以上的檢查之后，筆者用火狐測試了這個功能。視頻的元素是 video ，video 元素支持兩種格式的視頻：

其中 ogg 是指帶有 Thedora 視頻編碼和 Vorbis 音頻編碼的 Ogg 文件

MPEG4 是指 帶有 H.264 視頻編碼和 AAC 音頻編碼的 MPEG 4 文件

代碼如下：

<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>

以上代碼的意思是：引用一段視頻，寬320 高240  controls意思是帶有視頻控制 source 是視頻地址，video元素允許有多個source元素，瀏覽器選擇自己識別的第一個視頻格式

video元素屬性如下：

剩余這些屬性讀者可以自己測試看看，注意選擇一個支持性好的瀏覽器測試哦。

二、HTML5下的音頻

至目前為止網上大多數的音頻播放器仍然是FLASH，在HTML5中可以用audio元素來代替它，audio 元素能夠播放聲音文件或者音頻流。audio支持的音頻格式如下：

在頁面中引用方式如下：

<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元素的其他屬性如下：

三、HTML5下的繪制圖形

在HTML5中可以使用 canvas 結合 javascript  繪制圖形，示例代碼如下：

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

這段代碼本身并不能畫圖，需要通過以下的JS代碼來畫圖

<script type="text/javascript">
var c=document.getElementById("myCanvas");//獲取ID為myCanvas的元素
var cxt=c.getContext("2d");//創建context對象，context對象是內建的 HTML5 對象，擁有多種繪制路徑、矩形、圓形、字符以及添加圖像的方法。
cxt.fillStyle="#FF0000";//設置context對象的fillStyle屬性,即是背景顏色
cxt.fillRect(0,0,150,75);//調用fillRext 方法，創建矩形圖像，從坐標（0,0）畫至坐標(150,75)
</script>

如果需要了解過多的context對象的話去搜索下關于這個對象的其他方法吧。

 四、客戶端數據存儲

TML5 提供了兩種在客戶端存儲數據的新方法：

• localStorage - 沒有時間限制的數據存儲

• sessionStorage - 針對一個 session 的數據存儲

在HTML5出來之前，都是由COOKIE來做這些工作，但是 cookie 不適合大量數據的存儲，因為它們由每個對服務器的請求來傳遞，這使得 cookie 速度很慢而且效率也不高。不過IE和火狐都有其他的客戶端存儲數據方式，IE有它的userdata 火狐有它的 globalStorage ，但是有了HTML5的這兩種新的存儲方式，其他一切存儲方式都是浮云。

在 HTML5 中，數據不是由每個服務器請求傳遞的，而是只有在請求時使用數據。它使在不影響網站性能的情況下存儲大量數據成為可能。當然了這種請求方式和userdata globalStorage都差不多的，請求要快的多。

關于localStorage方法：

localStorage 方法存儲的數據沒有時間限制。

測試代碼如下

<script>

if(localStorage.count)localStorage.count = Number(localStorage.count)+1;
else localStorage.count = 1;
alert(localStorage.count)

</script>

關于sessionStorage方法：

sessionStorage 方法針對一個 session 進行數據存儲。當用戶關閉瀏覽器窗口后，數據會被刪除

測試代碼如下：

if (sessionStorage.pagecount)
  {
  sessionStorage.pagecount=Number(sessionStorage.pagecount) +1;
  }
else
  {
  sessionStorage.pagecount=1;
  }
alert(sessionStorage.pagecount)

我是在火狐下測試的，刷第一次的時候是1，如果不清除COOKIE的情況下再刷，第二次就是2，但是清除COOKIE之后再刷，結果會是1，難道這些存儲方式還和COOKIE還有藕斷絲連的關系？