http://www.w3school.com.cn/html5/html5_audio.asp
<<精通HTML5编程》第二、三章——Canvas和Audio/Video
本书第二章介绍Canvas。
一、简介
1、历史
Web之前有三种绘图的方式,Adobe Flash,SVG和VML。此次HTML5元素新添加的Canvas实际上是一个像素画布(bitmap canvas),和SVG不同,画在Canvas上的元素无法进行缩放,同时也不是DOM的一部分。 WHATWG的HTML5选择Canvas作为标准原因有二:1、由于不用存储画出的每一个元素,所以性能更好。2、和其他语言的二维绘图API类似,更容易实现。
2、结构
Canvas在HTML页面中是一个“<canvas></canvas>”标签,显示为一个矩形区域。矩形区域的左上角为坐标原点(0,0),向右为X轴,向下为Y轴。
3、检测浏览器支持
try {
document.createElement(“canvas”).getContext(“2d”);
document.getElementById(“support”).innerHTML =
“HTML5 Canvas is supported in your browser.”;
} catch (e) {
document.getElementById(“support”).innerHTML = “HTML5 Canvas is not supported É
in your browser.”;
}
4、失败回退
对于不支持canvas的浏览器,会显示canvas标签中间的备选文字。注意:还有两点不足的地方,在canvas中绘制的图片不能设置备选文字(text alternatives)。
5、浏览器支持
除了IE其他浏览器都支持,微软承诺在IE9中会支持Canvas
二、使用方法
Canvas可以画直线,弧线,支持各种线条样式和使用纯色或图片填充,可以绘制文字和阴影等,API和一般语言的2D绘图API类似,就不在重复摘抄了,可以参看Mozilla Developer Center上的的官方教程或者Opera的教程。
Canvas有两点需要注意:
1、可以以像素的方式读写Canvas对象;
2、可以跨站在canvas中载入图片,但是跨站载入的图片不可以以像素的方式编辑。也就是说跨站载入的图片可以显示,但是不能读取和复制。
本章的第二部分还介绍了一个使用Canvas元素的例子:HeatMap,,具体看附带的源代码。
第三章介绍Audio和Video标签
这两个标签提供了在浏览器中不使用插件播放视频和音频的特性。书中提到了那场著名的HTML5视频格式大战,最后不同的浏览器还是选择了支持不同的格式。
各浏览器对编码格式的支持:
两个标签的实际使用,请参考w3school的教程。
http://www.w3school.com.cn/html5/html5_audio.asp
http://www.w3school.com.cn/html5/html5_video.asp
检测浏览器支持:
var hasVideo = !!(document.createElement(‘video’).canPlayType);
回退:
<video src=”video.ogg”>
<object data=”videoplayer.swf” type=”application/x-shockwave-flash”>
<param name=”movie” value=”video.swf”/>
</object>
</video>
如果浏览器不支持HTML5的浏览器会载入flash标签,支持的则会优先选择HTML5的video标签。但这样必须准备两套视频格式了。
同样对于audio元素,不同的浏览器支持不同的格式,可以提供两种不同的格式供浏览器选择。
<audio controls>
<source src=”johann_sebastian_bach_air.ogg”>
<source src=”johann_sebastian_bach_air.mp3″>
An audio clip from Johann Sebastian Bach.
</audio>
非常酷的实例:
最后书里面提供了一个canvas和video标签结合的实例:视频时间线浏览器,非常酷。使用video元素播放视频,然后用canvas显示视频的缩略图。在这个程序中作者使用一个特性,使用video标签对应的js对象代替img对象直接将视频的一帧绘制到canvas。