<!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>