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还有藕断丝连的关系？