DOM编程艺术（音频、视频）

内容概要：

1、多媒体   <audio>、<video>

2、图形编程<canvas>

1、多媒体

1、基本用法：

	<audio src="music.mp3"></audio>

	<video src="movie.mov" width=320 height=240></video>

2、<audio>兼容用法：

	<audio>
		//	type属性是可选的，可以帮助浏览器解码音频或视频
		<source src="music.mp3" type="audio/mpeg">
		<source src="music.wav" type="audio/x-wav">
		<source src="music.ogg" type="audio/ogg">
	</audio>

3、<video>兼容用法：

	<video>
		<source src="movie.webm" type="video/webm; codecs='vp8, vorbis'">
		<source src="movie.mp4" type="video/mp4; codecs='avc1.42E01E, mp4a.40.2'">
	</video>

4、上面是主流浏览器的音频视频格式写法，下面两个链接是多媒体格式兼容性列表：

------音频

------视频

5、关于如何检测一种音频视频格式在浏览器中是否兼容：

可以用到audio的canPlayType方法：

		var a = new Audio();
		a.canPlayType('audio/nav');

如果浏览器支持的话，返回的就是“maybe”或者“probably”，否则返回“”。

注意：video没有办法用video构造函数生成video对象后像上面audio那样操作，只能通过在HTML中创建video标签后通过js获取标签的DOM对象，然后在调用这个DOM对象的canPlayType方法。

6、HTML属性：

第三个属性与第二个属性相冲突，如果使用了autoplay则preload失效。

7、控制多媒体播放：

方法：

------load()   加载媒体内容

------play()    开始播放

------pause()   暂停播放

属性：

-------playbackRate      播放速度（0-1为慢速播放、1为正常播放、大于1为快速播放）

-------currentTime      播放进度（以s为单位）

-------volume       音量（0-1的浮点数）

-------muted     静音（布尔值）

8、查询多媒体状态：

值为布尔：

------paused   暂停

------seeking    跳转

------ended    播放完成

值为数值：

------duration      媒体时长

------initialTime       媒体开始时间

9、多媒体相关事件：

------loadstart          开始请求媒体内容

------loadmetadata      媒体元数据已经加载完成

------canplay        加载了一些内容，可以开始播放

------play     调用play()，或设置了autoplay

------waiting     缓冲数据不够，播放暂停

------playing     正在播放

其他事件：事件列表

10、Web Audio API——更高级的用法

2、图形编程：

1、<canvas>基本用法：

	<canvas id="tutorial" width="300" height="150"></canvas>

上面的宽高值即为默认数据，这里不建议用css来指定宽高，因为css的渲染速度有差异。

2、渲染上下文：

canvas大部分的API都在一个叫做“渲染上下文”的对象里面。

获取“渲染上下文”对象：

		var canvas = document.getElementById('tutorial');
		var ctx = canvas.getContext('2d');
		//在画每一帧图像之前，要设置globalCompositeOperation属性，这个属性可以理解为全局的组合操作
		ctx.globalCompositeOperation = 'destination-over';

globalCompositeOperation取值——

3、基本绘图的步骤：

案例练习：

实现太阳，地球、月亮的旋转；

		//生成三个Image对象
		var sun = new Image();
		var moon = new Image();
		var earth = new Image();
		//对三个对象的src属性进行赋值，并保存在内存中，之后对这三个对象进行操作时就可以直接对内存进行读取，而不是要通过网络进行获取
		function init(){
			sun.src = 'Canvas_sun.png';
			moon.src = 'Canvas_moon.png';
			earth.src = 'Canvas_earth.png';
			//通过requestAnimationFrame定时器实现动画
			window.requestAnimationFrame(draw);
		}

		//具体的每一帧是通过draw函数来进行绘制的
		function draw(){
			var ctx = document.getElementById('canvas').getContext('2d');

			ctx.globalCompositeOperation = 'destination-over';
			ctx.clearRect(0,0,300,300);//clear canvas

			ctx.fillStyle = 'rgba(0,0,0,0.4)';
			ctx.strokeStyle = 'rgba(0,153,255,0.4)';
			ctx.save();//保存画布状态
			ctx.translate(150,150);

			//Earth
			var time = new Date();
			ctx.rotate( ((2*Math.PI)/60)*time.getSeconds() + ((2*Math.PI)/60000)*time.getMilliseconds() );
			ctx.translate(105,0);
			ctx.fillRect(0,-12,50,24);//Shadow
			ctx.drawImage(earth,-12,-12);

			//Moon
			ctx.rotate( ((2*Math.PI)/6)*time.getSeconds() + ((2*Math.PI)/6000)*time.getMilliseconds() );
			ctx.translate(0,28.5);
			ctx.drawImage(moon,-3.5,-3.5);

			ctx.restore();//恢复画布状态

			//画轨道的代码
			ctx.beginPath();
			ctx.arc(150,150,105,0,Math.PI*2,false);//Earth orbit
			ctx.stroke();

			ctx.drawImage(sun,0,0,300,300);

			window.requestAnimationFrame(draw);
		}

		init();