用html编辑一个多功能视频播放画面
时间: 2023-05-18 07:04:18 浏览: 87
可以使用HTML5的<video>标签来实现多功能视频播放画面,以下是一个简单的示例代码:
```
<!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.webm" type="video/webm">
<source src="myVideo.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
<br>
<button onclick="playPause()">播放/暂停</button>
<button onclick="makeBig()">放大</button>
<button onclick="makeSmall()">缩小</button>
<button onclick="makeNormal()">原始大小</button>
<br>
<input type="range" id="myRange" value="0" step="0.01" onchange="changeVolume()">
<br>
<button onclick="muteUnmute()">静音/取消静音</button>
<br>
<script>
var myVideo = document.getElementById("myVideo");
var myRange = document.getElementById("myRange");
function playPause() {
if (myVideo.paused) {
myVideo.play();
} else {
myVideo.pause();
}
}
function makeBig() {
myVideo.width = 960;
myVideo.height = 540;
}
function makeSmall() {
myVideo.width = 320;
myVideo.height = 180;
}
function makeNormal() {
myVideo.width = 640;
myVideo.height = 360;
}
function changeVolume() {
myVideo.volume = myRange.value;
}
function muteUnmute() {
if (myVideo.muted) {
myVideo.muted = false;
} else {
myVideo.muted = true;
}
}
</script>
</body>
</html>
```
在这个示例中,<video>标签定义了一个视频播放器,其中包含了三个<source>标签,用于指定不同格式的视频文件,以便在不同的浏览器中播放。controls属性用于显示播放器的控制条。
下面是一些JavaScript函数,用于实现播放器的各种功能:
- playPause():用于播放/暂停视频。
- makeBig():用于将视频放大到960x540像素。
- makeSmall():用于将视频缩小到320x180像素。
- makeNormal():用于将视频恢复到原始大小(640x360像素)。
- changeVolume():用于改变视频的音量。
- muteUnmute():用于静音/取消静音视频。
这些函数都是通过JavaScript来实现的,可以在<button>标签中调用它们。此外,还有一个<input>标签,用于控制视频的音量。