<!doctype html>
<html>
<head></head>
<body>
<video controls="controls" width="800" height="600" autoplay="autoplay" loop="loop" poster="AAA.jpg">
<source src="movie.ogg" type="video/ogg" />
<source src="movie.webm" type="video/webm" />
您的浏览器不支持视频标签,还不赶快升级。
</video>-->
<video src="movie.webm" controls="controls" id="video">
您的破浏览器都是古董早该换了,不然休想看我们的激情小电影。
</video>
<br />
<button οnclick="bofang()">播放</button>
<button οnclick="zanting()">暂停</button>
<button οnclick="kuaijin()">快进10秒</button>
<button οnclick="kuaitui()">快退10秒</button>
<button οnclick="shutup(this)">闭嘴</button>
<button οnclick="soso()">加速播放</button>
<button οnclick="yu()">减速播放</button>
<button οnclick="normal()">正常播放</button>
<button οnclick="upper()">提高嗓门</button>
<button οnclick="lower()">降低嗓门</button>
<script>
//获取对应的video标签
var video=document.getElementById('video');
//播放方法
function bofang(){
video.play();
}
//暂停方法
function zanting(){
video.pause();
}
//快进10秒
function kuaijin(){
//快退10秒
function kuaitui(){
video.currentTime-=10;
}
//静音
function shutup(obj){
if(video.muted){
obj.innerHTML="闭嘴";
video.muted=false;
}else{
obj.innerHTML="张嘴";
video.muted=true;
}
}
//3倍速度
function soso(){
video.playbackRate=3;
}
//慢三倍速度
function yu(){
video.playbackRate=1/3;
}
//正常倍速
function normal(){
video.playbackRate=1;//默认的播放倍速是1
}
//调高声音
function upper(){
video.volume+=0.2;//声音值的范围是0-1
}
//调低声音
function lower(){
video.volume-=0.2;
}
</script>
<audio src="ABC.mp3" controls="controls">
您的浏览器不支持视频标签,还不赶快升级。
</audio>
</body>
</html>
HTML5----video ,audio常规操作
最新推荐文章于 2018-04-26 18:34:19 发布