用js写一个视频播放页面
时间: 2023-12-11 21:05:04 浏览: 32
好的,下面是一个简单的视频播放页面的HTML和JavaScript代码:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>视频播放</title>
</head>
<body>
<video id="myVideo" width="640" height="360">
<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 id="playButton">播放</button>
<button id="pauseButton">暂停</button>
<button id="stopButton">停止</button>
<script>
var myVideo = document.getElementById("myVideo");
var playButton = document.getElementById("playButton");
var pauseButton = document.getElementById("pauseButton");
var stopButton = document.getElementById("stopButton");
playButton.addEventListener("click", function() {
myVideo.play();
});
pauseButton.addEventListener("click", function() {
myVideo.pause();
});
stopButton.addEventListener("click", function() {
myVideo.currentTime = 0;
myVideo.pause();
});
</script>
</body>
</html>
```
这段代码包括一个 `<video>` 元素,三个按钮,以及JavaScript代码来控制视频的播放、暂停和停止。在这里,我们使用了 `addEventListener()` 方法来为每个按钮添加点击事件监听器。当用户点击“播放”按钮时,我们调用 `play()` 方法来开始播放视频。当用户点击“暂停”按钮时,我们调用 `pause()` 方法来暂停视频的播放。当用户点击“停止”按钮时,我们将视频的 `currentTime` 属性设置为0,这会将视频跳转到开头,并暂停视频的播放。