HTML新特性

1.vidio 播放视频

• • 您的浏览器不支持video
• • •    
    • •    
  • 您的浏览器不支持video

control属性供添加播放、暂停和音量控件。

浏览器将识别第一个可识别的source

视频格式

当前，video 元素支持两种视频格式：

	IE8	Firefox3.5	Opera10.5	Chrome3.0	Safari3.0
Ogg		√	√	√
MPEG4				√	√

Ogg = 带有 Thedora 视频编码和 Vorbis 音频编码的 Ogg 文件

MPEG4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件

2.audio播放音频

• 您的浏览器不支持audio

浏览器将识别第一个可识别的source

	IE8	Firefox3.5	Opera10.5	Chrome3.0	Safari3.0
Ogg Vorbis		√	√	√
MP3				√	√
Wav		√	√		√

 

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

getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

4.在客户端存储数据

localStorage：没有时间限制的数据存储，第二天、第二周或是明年再访问，数据依然存在

sessionStorage：针对一个session的数据存储，当浏览器关闭数据消失

Html5使用javascript来存储和访问数据

创建和访问localStorage

localStorage计算页面的访问次数

<script type="text/javascript">
if (localStorage.pagecount)
  {
  localStorage.pagecount=Number(localStorage.pagecount) +1;
  }
else
  {
  localStorage.pagecount=1;
  }
document.write("Visits "+ localStorage.pagecount + " time(s).");
</script>

创建和访问sessionStorage

sessionStorage计算访问页面的次数

<script type="text/javascript">
if (sessionStorage.pagecount)
  {
  sessionStorage.pagecount=Number(sessionStorage.pagecount) +1;
  }
else
  {
  sessionStorage.pagecount=1;
  }
document.write("Visits "+sessionStorage.pagecount+" time(s) this session.");
</script>