标签：
HTML5的设计目的是为了在移动设备上支持多媒体。新的语法特征被引进以支持这一点，如video、audio和canvas 标记。
下面是我用新标签做的小案列：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#video{
border: 5px outset #EE82EE;
margin-top: 30px;
border-radius: 20px;
}
#button{
border: 1px dashed #800080;
border-radius: 50px;
background-color: #EE82EE ;
}
</style>
</head>
<body>
<center>
<video src="madia/video.mp4" id="video" controls="controls"></video>
</br>
<button id="button" onclick="ks()">开始</button>
<button id="button" onclick="zt()">暂停</button>
<button id="button" onclick="upper()">加大音量</button>
<button id="button" onclick="lower()">减小音量</button>
<button id="button" onclick="jingyin(this)">静音</button>
<button id="button" onclick="jiasu(this)">加速</button>
<button id="button" onclick="jiansu()">减速</button>
</center>
<script>
var video=document.getElementById("video");
function ks(){
video.play();
}
function zt(){
video.pause();
}
function upper(){
video.volume+=0.2;//video.volume+0.2
}
function lower(){
video.volume-=0.2;
}
function jingyin(obj){
if(video.muted){
obj.innerHTML="静音";
video.muted=false;//打开音量
}else{
obj.innerHTML="声音";
video.muted="true";//关闭音量
}
}
function jiasu(){
video.currentTime+=2;
}
function jiansu(){
video.currentTime-=2;
}
</script>
</body>
</html>
这就是我做的一个小播放器，如有不懂，可以问我哦！
标签：
原文地址：http://www.cnblogs.com/996158041chenlu/p/5680081.html
