H5新特性 -音频视频标签（媒体标签）

音频视频标签

常见媒体标签有：audio 、 video 、source
实际上他们的控件都一样，这里以audio为例进行说明

• controls: 用户控制界面（标签自带）
• autoplay： 自动播放 用于视频，背景音乐
• loop： 循环播放
• currentTime: 当前播放时间
• duration ： 总时间（只读）
• volume: 音量
• muted: 静音
• play: 播放
• pause: 暂停（只读）
• load: 重新加载
• ontimeupdate: 随着音乐播放而不断触发的方法
• onended: 当音乐结束后触发的事件（只读）
• error: 媒体发生错误时返回错误代码 （只读）
• currentSrc: 以字符串形式返回媒体形式 （只读）

	<audio src="默认.mp3" 
		controls="controls" autoplay="autoplay" id="music"></audio>
	<br/>

	<div class="musicBtn">
		<input type="button" class="btn" id="timB" value="显示播放时间" />
		<div class="box">12</div>
		<input type="button" class="btn" id="timA" value="显示总时间" />
		<div class="box">12</div>
		<input type="button" class="btn" id="vtop" value="音量+" />
		<div class="voice">12</div>
		<input type="button" class="btn" id="vbottom" value="音量-" />
		<input type="button" class="btn" id="vclose" value="静音×" />
		<br />
		<input type="button" class="btn" id="on" value="播放" />
		<input type="button" class="btn" id="off" value="暂停" />
		<input type="button" class="btn" id="fast" value="快进" />
		<input type="button" class="btn" id="slow" value="快退" />
		<input type="button" class="btn" id="rest" value="重放" />
		<div class="play"></div>
	</div>

	<script type="text/javascript">
		var au = document.getElementsByTagName("audio")[0];
		var timeB = document.getElementById("timB");
		var timeA = document.getElementById("timA");
		var vtop = document.getElementById("vtop");
		var vbottom = document.getElementById("vbottom");
		var vclose = document.getElementById("vclose");
		var on = document.getElementById("on");
		var off = document.getElementById("off");
		var fast = document.getElementById("fast");
		var slow = document.getElementById("slow");
		var rest = document.getElementById("rest");
		var play = document.getElementsByClassName("play")[0];
			
		//currentTime: 当前播放时间
		timeB.onclick = function() {
			console.log("当前播放时间为：" + au.currentTime);
		}

		//duration ： 总时间 只读
		timeA.onclick = function() {
			console.log("总时间为：" + au.duration);
		}

		//volume: 音量
		vtop.onclick = function() {
			if(au.volume >= 1) {
				return false;
			}
			au.volume += 0.1;
		}

		vbottom.onclick = function() {
			if(au.volume < 0.1) {
				return false;
			}
			au.volume -= 0.1;
		}

		vclose.onclick = function() {
			//muted: 静音
			au.muted = !au.muted;
		}

		on.onclick = function() {
			if(au.paused) { //暂停   只读不可改
				au.play(); //播放
				play.innerHTML = "暂停";
			} else {
				au.pause();
				play.innerHTML = "播放";
			}
			console.log(au.paused); //输出当前播放状态
		}

		off.onclick = function() {
			au.pause(); //暂停   只读
			console.log(au.paused); //输出当前播放状态
		}

		rest.onclick = function() {

			//重新加载
			au.load();
			n = 0;
		}

		//随着音乐播放而不断触发的方法
		var n = 0;
		au.ontimeupdate = function() {

			console.log(n++);
		}

		//当音乐结束后触发的事件
		au.onended = function() { // 只读
			console.log("我播完了");
		}

		fast.onclick = function() {
			au.currentTime += 3;
				
		}
	</script>