<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html">
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<video id="video" width="500" height="500" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.mp4" type="video/ogg">
您的浏览器不支持 HTML5 video 标签。
</video>
</br></br>
<button onclick="playPause(this)">播放</button>
<button onclick="forward()">快进5秒</button>
<button onclick="rewind()">快退5秒</button>
<button onclick="mute(this)">静音</button>
<button onclick="accelerate()">加速3倍播放</button>
<button onclick="decelerate()">减速3倍播放</button>
<button onclick="normal()">正常播放</button>
<button onclick="upperVolume()">提高声音</button>
<button onclick="lowerVolume()">减少声音</button>
<script type="text/javascript">
var video = document.getElementById('video');
function playPause(obj) {
if (video.paused) {
video.play();
obj.innerHTML = "暂停";
} else {
video.pause();
obj.innerHTML = "播放";
}
}
function forward() {
video.currentTime += 5;
}
function rewind() {
video.currentTime -= 5;
}
function mute(obj) {
if (video.muted) {
video.muted = false;
obj.innerHTML = "静音";
} else {
video.muted = true;
obj.innerHTML = "开声";
}
}
function accelerate() {
video.playbackRate = 3;
}
function decelerate() {
video.playbackRate = 1 / 3;
}
function normal() {
video.playbackRate = 1;
}
function upperVolume() {
video.volume += 0.2;
}
function lowerVolume() {
video.volume -= 0.2;
}
</script>
</body>
</html>
Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 支持 <video> 元素.
注意: Internet Explorer 8 或者更早的IE版本号不支持 <video> 元素。