音频播放器

大怪兽0110

于 2018-11-30 16:51:28 发布

阅读量164

点赞数 1

本文链接：https://blog.csdn.net/hyf1712011164/article/details/84660609

版权

<!DOCTYPE html>
<html>
<head>
<meta  charset="utf-8">
<title>MP3，MP4</title>
<style>
audio{
	width:200px;
	height:200px;
	
	
}

body{
	
	margin:30px auto;
	padding:0px;
	text-align: center;
	font-size: 10px;
	font-family: "微软雅黑";
	background: #f2f2f2;
	
	
}
button{
	margin-top: 10px;
	border: none;
	background-color: #41A81E;
	color: #F2F2F2;
	width: 68px;
	height: 22px;
	text-align: center;	
	vertical-align: middle;
	border-radius: 8px;
	border: 1px solid #078111;
}
progress{
	width:552px;
	border: 1px solid #333;
	background: #FFF;
	text-align: left;
}

#showTime{
margin-top: 10px;
color: #333333;	
}
#progressValue{
	width: 0%;
	height: 20px;
	background: #FFFFFF;
	cursor: default;
	float: left;
}
</style>

</head>	
<body>

<center>
	<p>卡农</p>
	<audio src="img/Jim Brickman - Canon in D Major (Pachelbel’s Canon).mp3"controls="controls"autoplay="autoplay"loop="loop"></audio>
	<p> 视频播放</p>
<video  src="img/Kisum-啤酒两杯(2 BEER)(高清).mp4" id="video"  controls="controls"width="400"height="300"preload="auto"poster="img/-392811922cc4806a.jpg"autoplay="false" loop="loop" ></video>
<div class="text-align:center">
	<progress id="playPercent"max="100"></progress>
<div id="progressValue"></div>
<div id="showTime"></div>
<button id="btnPlay1" onclick="videoPlay()">播放</button>	
<button id="btnPlay2" onclick="videoPause()">暂停</button>	
<button id="btnPlay3" onclick="videoSpeedup()">快放</button>
<button id="btnPlay4" onclick="videoSpeeddown()">慢放</button>
<button id="btnPlay5" onclick="videoSpeednormal()">正常</button>
<button id="btnPlay6" onclick="fastForward()">快进</button>
<button id="btnPlay7" onclick="rewind()">快退</button>


</div>
<script>
	var video=document.getElementById("video")
	function videoPlay(){
		video.play();
		
	}
		function videoPause(){
		video.pause();
		
	}

	function videoSpeedup(){
		video.play();
		video.playbackRate+=1;
		
	}
	function videoSpeeddown(){
		video.play();
		video.playbackRate-=1;
		
	}
	
	
	function videoSpeednormal(){
		video.play();
		video.playbackRate=1;
	}
	
	function fastForward(){
		video.play();
		video.currentTime+=10;
	}
	function rewind(){
		video.play();
		video.currentTime-=10;
	
	}
	function caleTime(time){
		var hour;
		var minute;
		var second;
		hour=String(parseInt(time/3600,10));
		if(hour.length==1)
		hour='0'+hour;
		minute=String(parseInt((time/3600)/60,10));
		if(minute.length==1)
		minute='0'+minute;
		
		second=String(parseInt(time/60,10));
		if(second.length==1)
		second='0'+second;
		return hour+":"+minute+":"+second;
		
	}
	
	var videoerror=document.getElementById("showVideo");
	videoerror.addEventListener("error",function(){
		var errorinfo=videoerror.error;
		switch(errorinfo.code){
			case 1:
			alert("用户取消了视频的载入");
			break;
			case 2:
			alert("网络故障");
			break;
			case 3:
			alert("解码错误");
			break;
			case 4:
			alert("浏览器不支持获得的视频格式");
			break;
			
			
		}
		
		
		
	},false);
	
</script>

</center>
	</body>
</html>

大怪兽0110

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
音频播放器

&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset="utf-8"&gt;&lt;title&gt;MP3，MP4&lt;/title&gt;&lt;style&gt;audio{ width:200px; height:200px; }body{ margin:30p
复制链接

扫一扫