Html5 video用法详解
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>test1</title>
</head>
<body>
<!-- video对象属性：width height 设置视频的宽高 autoplay 视频就绪自动播放 controls 向用户显示播放控件 poster 加载等待的画面图片 loop 播放完是否继续播放该视频，循环播放 -->
<video src="qingdao1.mp4" width="442" height="242" controls="controls" id="video" poster="bg.jpg">
您的浏览器暂不支持播放该视频，请升级至最新版浏览器。
</video>
<br>
<button onclick="play()">播放</button>
<button onclick="pause()">暂停</button>
<button onclick="kuaijin()">快进5秒</button>
<button onclick="kuaitui()">快退5秒</button>
<button onclick="mute(this)">静音</button>
<button onclick="jiasu()">加速播放</button>
<button onclick="jiansu()">减速播放</button>
<button onclick="normal()">正常播放</button>
<button onclick="upper()">增加音量</button>
<button onclick="lower()">降低音量</button>
<script>
var video = document.getElementById("video");
// video对象可以通过ontimeupdate时间来进行监听实时播放进度
video.ontimeupdate = () => {
console.log(video.currentTime);
console.log(video.duration)
}
//播放
function play() {
video.play();
}
//暂停
function pause() {
video.pause();
}
//快进
function kuaijin() {
video.currentTime += 5;
}
//快退
function kuaitui() {
video.currentTime -= 5;
}
//静音
function mute(obj) {
if (video.muted) {
obj.innerHTML = "静音";
video.muted = false;
} else {
obj.innerHTML = "声音";
video.muted = true;
}
}
//加速(3)
function jiasu() {
video.playbackRate = 3;
}
//减速（3）
function jiansu() {
video.playbackRate = 1 / 3;
}
function normal() {
video.playbackRate = 1;
}
//增加音量
function upper() {
var volume = video.volume * 10;
if (volume >= 0 && volume < 10) {
volume += 2;
video.volume = volume / 10;
} else if (volume === 10) {
video.volume = 1;
} else {
return false;
}
}
//降低音量
function lower() {
var volume = video.volume * 10;
if (volume >= 2 && video.volume <= 10) {
volume -= 2;
video.volume = volume / 10;
} else if (video.volume == 0) {
video.volume = 0;
} else {
return false;
}
}
</script>
</body>
</html>
