<!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>
![]()
