htmlAPI

媒体元素

在HTML5问世之前，要在网络上展示视频，音频，动画，除了使用第三方自主开发的播放器之外，使用得最多的工具就是Flash,但是需要在浏览器上安装各种插件，并且有时速度很慢。HTML5新增了两个与媒体相关的标签，让开发人员不必依赖任何插件就能在网页中嵌入跨浏览器的音频和视频内容，这两个标签是

1. 嵌入视/音频：

<video src=""></video>
<video src="" id="" width="640" height="360">视频播放器无法使用</video>
<audio src="" id="">音频播放器无法使用</audio>
标签之间的元素表示后备内容，在浏览器不支持这两个媒体元素的情况下显示。

2. source,指定不同媒体来源

并不是所有的浏览器都支持所有媒体格式，可以指定多个不同的媒体来源。由于不同的浏览器支持不同的编解码器，一般要指定多种格式的媒体来源。
	src 	指播放媒体的URL地址
	type 	媒体类型，属性值为播放文件的MIME类型，该属性值中的codes参数表示所使用的媒体的编码格式。     


	<video id="video_1">
		<source src="sample.ogv" type="video/ogg">
		<source src="sample.mov" type="video/quicktime">
		视频播放器无法使用
	</video>

	<audio id="audio_1">
		<source src="" type="">
		<source src="" type="">
		音频播放器无法使用
	</audio>

3. 视频格式

视频格式与浏览器的支持当前， <video> 元素支持三种视频格式： MP4, WebM, 和 Ogg:
浏览器 		MP4 		WebM 	Ogg
Internet 	Explorer 	YES 	NO 
Chrome 		YES 		YES 	YES
Firefox 	YES 		YES 	YES
Safari 		YES 		NO 		NO
Opera 		YES 	 	YES 	YES

MP4，带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件
WebM，带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件
Ogg，带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件

视频格式
	格式 	MIME-type
	MP4 	video/mp4
	WebM 	video/webm
	Ogg 	video/ogg
音频格式：
		MP3、Wav、Ogg。

4. 自定义媒体播放器

btn.onclick = function(){
	if(player.paused){
		player.play();
		this.value = "暂停";
	}else{
		player.pause();
		this.value = "播放";
	}
};
//实时更新当前播放时间
setInterval(function(){
	curtime.innerHTML = player.currentTime;
},250);

<div class="mediaplayer">
	<div class="video">
		<video id="player"  width="400" height="300">
			<source src="../../video/html5.mp4" type="video/mp4">
		</video>
	</div>
	<div class="controls">
		<input type="button" id="video-btn" value="播放"/>
		当前时间：<span id="curtime">0</span>
		总时长：<span id="duration">0</span>
	</div>
</div>
如果想在一段音乐播放后再播放另一段音频，必须在onfinish事件处理函数中调用play()方法

5. 音/视频属性：

src		
	指向要加载的媒体文件
width	
	video元素独有，播放器的宽度，以像素为单位
height	
	video元素独有，播放器的高度，以像素为单位

取值为boolean类型的
	autoplay	
		取得或设置自动播放标志。
		<video src="sample.mov" autoplay></video>
	controls	
		用于显示或隐藏浏览器自带的播放用的控制条。控制条具有播放，暂停等按钮。。
		<video src="sample.mov" controls></video>
	ended
		表示媒体文件是否播放完毕
	loop
		表示媒体文件在播放完成后是否再从头开始播放(循环播放)
	muted
		媒体文件是否静音
	paused
		表示是否暂停
	
取值为number类型的
	整数
	networkState
		表示当前媒体的网路连接状态，0表示空，1表示正在加载，2表示加载元数据，3表示已经加载了第一帧，4表示加载完毕
	bufferingRate	
		下载过程中每秒钟平均接收到的位数
	defaultPlaybackRate	浮点数
		设置或取得默认播放速度，默认为1.0秒(开发者可以改变)
	duration
		媒体的总播放时间
	videoHeight
		返回视频的高度，只适用于video
	videoWidth
		返回视频的宽度，只适用于video
	readyState
		表示媒体是否已经就绪。
		0表示数据不可用，
		1表示可以显示当前帧，
		2表示可以开始播放，
		3表示媒体可以从头到尾播放
		4表示当前播放位置已经有数据可以播放，同时也获取到了可以让播放器前进的数据，而且浏览器确认媒体数据以某一种速度进行加载可以保证有足够的后续数据进行播放

	浮点数
	currentTime	
		已经播放的秒数
	playbackRate
		取得或设置当前的播放速度(用户可以改变)
	start
		取得或者设置媒体文件中开始播放的位置，以秒为单位
	volume
		取得或设置当前音量 0-1之间得
	currentSrc	
		string
		当前播放的媒体文件的URL，只读属性

6. 音/视频共有方法

play
	播放媒体，自动将元素的paused属性的值变为false
pause
	暂停播放，自动将元素的paused属性变为true
load
	重新载入媒体进行播放，自动将元素的playbackRate属性的值变为defaultPlaybackRate属性的值，自动将元素的error值变为null

7. 音/视频共有事件

abort	
	下载中断
canplay
	可以播放时，readyState值为2
canplaythrough
	播放可继续，而且应该不会中断，readyState值为3
canshowcurrentframe
	当前帧已下载完毕，readyState值为1
detaunavailable
	因为没有数据而不能播放；readyState值为0
durationchange
	duration属性的值改变
emptied
	网路连接关闭
empty
	发生错误阻止了媒体下载
ended
	媒体已播放到了末尾，播放停止
error
	播放媒体发生错误时该事件被激发
	error属性
	error.code
	下载期间发生了网络错误，只读属性
	1 	:媒体数据的下载过程中由于用户操作原因而被终止
	2	:确认媒体资源可用，但是在下载时出现网路错误，媒体数据的下载被终止
	3	:确认媒体资源可用，但是解码时发生错误
	4 	:媒体资源部可用或媒体资源不被支持

load 
	所有媒体已经加载完毕，这个事件可能废弃，建议使用canplaythrough
loadeddata
	媒体的第一帧已经加载完毕
loadedmetadata
	媒体的元数据已经加载完毕
loadstart
	下载已经开始
pause
	播放已暂停
play
	媒体已收到指令开始播放
playing
	媒体已实际开始播放
progress
	正在下载
ratechange
	播放媒体的速度改变
seeked	
	搜索结束
seeking
	正移动到新位置
stalled
	浏览器尝试下载，但未收到数据
timeupdate
	currentTime被以不合理或意外的方式更新
volumechange
	volume属性值或muted属性值已改变
waiting
	播放暂停。等待下载更多数据