html5做的视频音频特效
源代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>音频视频</title>
<style type="text/css">
body{text-align: center;background-color:#a9a9a9;}
#p1{width:56%;height:500px; margin:5% auto;background:url("img/dr.jpg");padding-top: 45px;}
</style>
</head>
<body>
<div id="p1">
<video width="500" height="300" controls="autoplay" align="left" loop="loop" id="video"><!--设置循环播放-->
<source src="video/movie.ogg" type="video/ogg" /><!--链接不同的视频文件，保证在每个浏览器上都可播放此视频-->
<source src="video/movie.mp4" type="video/mp4" />
<source src="video/movie.webm" type="video/webm" />
<object data="video/movie.mp4" width="800" height="300">
<embed width="600" height="300" src="video/movie.swf" /><!--嵌入flash标签-->
</object>
你的浏览器不支持
</video>
<br>
<button onclick="start()">播放</button>
<button onclick="stop()">暂停</button>
<button onclick="fast_ten()">快进10秒</button>
<button onclick="slow_ten()">快退10秒</button>
<button onclick="shutup(this)">闭嘴</button>
<button onclick="fast()">加速播放</button>
<button onclick="slow()">减速播放</button>
<button onclick="normal()">正常播放</button>
<button onclick="upper()">提高音量</button>
<button onclick="lower()">降低音量</button>
<hr/>
<br><br>
<audio src="audio/杨宗纬-一次就好.mp3" controls="controls" loop="loop" id="audio"></audio>
<br>
<button onclick="start1()">播放</button>
<button onclick="stop1()">暂停</button>
<button onclick="fast_ten1()">快进10秒</button>
<button onclick="slow_ten1()">快退10秒</button>
<button onclick="shutup1(this)">闭嘴</button>
<button onclick="fast1()">加速播放</button>
<button onclick="slow1()">减速播放</button>
<button onclick="normal1()">正常播放</button>
<button onclick="upper1()">提高音量</button>
<button onclick="lower1()">降低音量</button>
</div>
</body>
<script type="text/javascript">
var video=document.getElementById("video");
function start(){//播放
video.play();
}
function stop(){//暂停
video.pause();
}
function fast_ten(){//快进10秒
video.currentTime+=10;
}
function slow_ten(){//快退10秒
video.currentTime-=10;
}
function shutup(obj){//静音设置
if(video.muted){
obj.innerHTML="闭嘴";
video.muted=false;
}else{
obj.innerHTML="张嘴";
video.muted=true;
}
}
function fast(){//加快3倍速度
video.playbackRate=3;
}
function slow(){//减三倍速度
video.playbackRate=1/3;
}
function normal(){//正常速度
video.playbackRate=1;
}
function upper(){
video.volume+=0.2;//声音的范围值是0-1
}
function lower(){
video.volume-=0.2;//声音的范围值是0-1
}
var audio=document.getElementById("audio");
function start1(){//播放
audio.play();
}
function stop1(){//暂停
audio.pause();
}
function fast_ten1(){//快进10秒
audio.currentTime+=10;
}
function slow_ten1(){//快退10秒
audio.currentTime-=10;
}
function shutup1(obj){//静音设置
if(audio.muted){
obj.innerHTML="闭嘴";
audio.muted=false;
}else{
obj.innerHTML="张嘴";
audio.muted=true;
}
}
function fast1(){//加快3倍速度
audio.playbackRate=3;
}
function slow1(){//减三倍速度
audio.playbackRate=1/3;
}
function normal1(){//正常速度
audio.playbackRate=1;
}
function upper1(){
audio.volume+=0.2;//声音的范围值是0-1
}
function lower1(){
audio.volume-=0.2;//声音的范围值是0-1
}
</script>
</html>
注意点：
把script里面的函数写到了<head></head>标签中，在html中代码是从上往下读，所以得到的id一直都为空，function的方法就无法调用到，因此需要把script放到vedio和audio下面。
