html视频声音控制的代码,H5新属性audio音频和video视频的控制详解(推荐)
时间: 2024-02-25 15:52:31 浏览: 20
好的,以下是html视频声音控制的代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>视频声音控制</title>
</head>
<body>
<!-- 视频 -->
<video id="myVideo" width="640" height="360" controls>
<source src="myVideo.mp4" type="video/mp4">
<source src="myVideo.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
<!-- 音量控制 -->
<input type="range" id="volumeRange" min="0" max="1" step="0.1" value="1" onchange="changeVolume()">
<!-- 播放/暂停按钮 -->
<button onclick="playPause()">播放/暂停</button>
<!-- 停止按钮 -->
<button onclick="stop()">停止</button>
<!-- 快进按钮 -->
<button onclick="fastForward()">快进</button>
<!-- 慢放按钮 -->
<button onclick="slowMotion()">慢放</button>
<script>
var myVideo = document.getElementById("myVideo");
var volumeRange = document.getElementById("volumeRange");
function changeVolume() {
myVideo.volume = volumeRange.value;
}
function playPause() {
if (myVideo.paused) {
myVideo.play();
} else {
myVideo.pause();
}
}
function stop() {
myVideo.pause();
myVideo.currentTime = 0;
}
function fastForward() {
myVideo.currentTime += 5;
}
function slowMotion() {
myVideo.playbackRate = 0.5;
}
</script>
</body>
</html>
```
在上面的代码中,我们使用了`<video>`标签来嵌入视频,并添加了`controls`属性来添加视频控制面板。我们还使用了`<input>`标签来创建音量控制条,并使用`onchange`属性来调用`changeVolume()`函数。我们还添加了几个按钮,每个按钮都有一个相应的JavaScript函数来控制视频的播放,暂停,停止,快进和慢放。