标签：
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、MPEG4、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、MP3、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 的矩形。
标签：
原文地址：http://www.cnblogs.com/carls/p/5372207.html
