<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<title>video标签和audio标签</title>
<head>
<body>
<h2>video标签的使用</h2>
<!-- <video src="kobe.mp4" controls="controls">
你的破浏览器可以退休了，赶紧升级吧！
</video> -->
<!-- <video controls width="500px" autoplay loop poster="dog.jpg">
<source src="kobe.mp4" type="video/mp4" />
<source src="movie.ogg" type="video/ogg"/>
你的破浏览器可以退休了，赶紧升级吧！
</video> -->
<h2>使用video标签的API</h2>
<video src="kobe.mp4" controls="controls" id="video">
你的破浏览器可以退休了，赶紧升级吧！
</video>
<br/>
<input type="button" value="播放" onclick="playVideo()" />
<input type="button" value="停止" onclick="stopVideo()" />
<input type="button" value="快进10秒" onclick="forward()" />
<input type="button" value="快退10秒" onclick="back()" /> <br/>
<input type="button" value="闭嘴" onclick="shutup(this)" />
<input type="button" value="加速x2" onclick="fast()" />
<input type="button" value="减速x2" onclick="slow()" />
<input type="button" value="正常倍速" onclick="normal()" /> <br/>
<input type="button" value="大声点" onclick="up()" />
<input type="button" value="小声点" onclick="down()" />
<script>
var video=document.getElementById("video");
//播放视频
function playVideo(){
video.play();
}
//停止视频
function stopVideo(){
video.pause();
}
//快进10秒
function forward(){
video.currentTime+=10;
}
//快退10秒
function back(){
video.currentTime-=10;
}
//静音
function shutup(obj){
if(video.muted){
video.muted=false;
obj.value="闭嘴";
}else{
video.muted=true;
obj.value="说话";
}
}
//加速x2
function fast(){
video.playbackRate=2; //默认播放速度为1
}
//减速x2
function slow(){
video.playbackRate=1/2;
}
//正常倍速
function normal(){
video.playbackRate=1;
}
//大声点
function up(){
video.volume+=0.1; //声音值的范围为0-1
}
//小声点
function down(){
video.volume-=0.1; //声音值的范围为0-1
}
</script>
<h2>audio标签的使用</h2>
<audio src="wow.mp3" controls>
你的破浏览器可以退休了，赶紧升级吧！
</audio>
</body>
</html> 原文地址：http://blog.csdn.net/wangzi11322/article/details/45305887
