HTML5 基础 音视频部分

音频格式：mp3, ogg, wav.

视频格式：mp4, ogv, webm.

历史：早期使用Flash, html5 后使用video/ audio.

video/audio 标签及其常用属性

- controls

- autoplay

- loop

- source

- preload

- poster(video)【视频播放前显示的封面】

以视频为例：

	<video src="media/badfox.mp4" width="640px" autoplay="autoplay" controls="controls" loop="loop">
		您的浏览器不支持video 标签
	</video>
	<video width="640px" autoplay="autoplay" controls="controls" loop="loop" poster="xxx.jpg" preload="preload">
		<!-- 只会显示最先能显示出来的视频资源 -->
		<!-- 以下三种格式，基本可以兼容所有浏览器 -->
		<source src="media/xxx.mp4" type="video/mp4">
		<source src="media/xxx.ogv" type="video/ogv">
		<source src="media/xxx.webm" type="video/webm">
	</video>

其中，preload 属性有三个值：auto meta none. 分别表示，加载数据与元数据，只加载元数据，不加载数据不加载元数据。

video/audio API 事件

- loadedmetadata（加载完元数据触发的事件）              - seeking（拖动视频进度条，需对视频进行重定位）

- progress（请求视频数据）                                        - waiting（网络上视频，下一帧图像需要缓冲时）

- canplay（可以播放）                                               - volumechange（声音变化）

- canplaythrough（可以一直播放到结束）                      - ended（视频结束）

- timeupdate（时间进度在更新，在播放时会一直触发）    - pause（视频暂停）

	<video src="media/badfox.mp4" id="myvideo" width="640px" autoplay="autoplay" controls="controls">
		浏览器不支持视频（video）
	</video>
	<script type="text/javascript">
		var v = document.getElementById("myvideo");
		// 加载元数据
		v.onloadedmetadata = function(){
			console.log("loadedmetadata")
		}
	</script>

video/audio API 属性

- currentSrc    -ended

- duration    - muted

- currentTime    - playbackRate

- volume    - buffered

- paused

<script type="text/javascript">
		var v = document.getElementById("myvideo");
		var startbtn = document.getElementById("start");
		var pausebtn = document.getElementById("pause");
		// 加载元数据
		v.onloadedmetadata = function(){
			console.log("loadedmetadata");
			console.log("视频地址：" + v.currentSrc);
			console.log("视频总时长：" + v.duration);
			console.log("视频播放速率：" + v.playbackRate);
			console.log("是否暂停：" + v.paused);
			console.log("是否结束：" + v.ended);
			console.log("是否静音：" + v.muted);
		}
		v.ontimeupdate = function(){
			console.log("视频当前时间：" + v.currentTime);
			console.log("当前缓冲量：" + v.buffered.end(0));
		}
		v.onvolumechange = function(){
			console.log("当前音量：" + v.volume);
		}
		startbtn.onclick = function(){
			// 播放
			v.play();
		};

		pausebtn.onclick = function(){
			// 暂停
			v.pause();
		}

		
	</script>