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)
{
h264Test=vidTest.canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"');
if (!h264Test)
{
document.getElementById("checkVideoResult").innerHTML="Sorry. No video support."
}
else
{
if (h264Test=="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 元素支持两种格式的视频：

	IE 8	Firefox 3.5	Opera 10.5	Chrome 3.0	Safari 3.0
Ogg		√	√	√
MPEG 4				√	√

其中 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元素属性如下：

属性	值	描述
autoplay	autoplay	如果出现该属性，则视频在就绪后马上播放。
controls	controls	如果出现该属性，则向用户显示控件，比如播放按钮。
height	pixels	设置视频播放器的高度。
loop	loop	如果出现该属性，则当媒介文件完成播放后再次开始播放。
preload	preload	如果出现该属性，则视频在页面加载时进行加载，并预备播放。 如果使用 "autoplay"，则忽略该属性。
src	url	要播放的视频的 URL。
width	pixels	设置视频播放器的宽度。

剩余这些属性读者可以自己测试看看，注意选择一个支持性好的浏览器测试哦。

二、HTML5下的音频
至目前为止网上大多数的音频播放器仍然是FLASH，在HTML5中可以用audio元素来代替它，audio 元素能够播放声音文件或者音频流。audio支持的音频格式如下：

	IE 8	Firefox 3.5	Opera 10.5	Chrome 3.0	Safari 3.0
Ogg Vorbis		√	√	√
MP3				√	√
Wav		√	√		√

在页面中引用方式如下：

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

属性	值	描述
autoplay	autoplay	如果出现该属性，则音频在就绪后马上播放。
controls	controls	如果出现该属性，则向用户显示控件，比如播放按钮。
loop	loop	如果出现该属性，则每当音频结束时重新开始播放。
preload	preload	如果出现该属性，则音频在页面加载时进行加载，并预备播放。 如果使用 "autoplay"，则忽略该属性。
src	url	要播放的音频的 URL。

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