用js制作按钮播放弹窗视频
时间: 2024-03-22 07:38:08 浏览: 9
好的,你可以按照以下步骤来实现:
1. 在 HTML 文件中添加一个按钮和一个弹窗,例如:
```
<button id="playButton">播放视频</button>
<div id="videoModal" style="display:none;">
<video controls width="640" height="360">
<source src="your-video-url.mp4" type="video/mp4">
</video>
</div>
```
2. 在 JavaScript 文件中获取按钮和弹窗的 DOM 元素,例如:
```
const playButton = document.querySelector('#playButton');
const videoModal = document.querySelector('#videoModal');
```
3. 给按钮添加点击事件,当点击按钮时显示弹窗,例如:
```
playButton.addEventListener('click', () => {
videoModal.style.display = 'block';
});
```
4. 当弹窗显示时自动播放视频,例如:
```
videoModal.addEventListener('show', () => {
const video = videoModal.querySelector('video');
video.play();
});
```
5. 当弹窗关闭时停止播放视频,例如:
```
videoModal.addEventListener('hide', () => {
const video = videoModal.querySelector('video');
video.pause();
});
```
以上是一个简单的实现方法,你可以根据自己的需求进行调整。