用js实现点击图片播放视频的功能
时间: 2023-11-28 15:48:33 浏览: 28
可以通过以下步骤实现点击图片播放视频的功能:
1. 首先在HTML中添加一个<img>标签和<video>标签,分别用于显示图片和视频。
```html
<img src="your-image.jpg" id="play-button">
<video src="your-video.mp4" id="video-player"></video>
```
2. 然后在CSS中设置图片的样式,使其看起来像一个播放按钮。
```css
#play-button {
cursor: pointer;
width: 100px;
height: 100px;
background: url(play-button.svg) no-repeat center;
background-size: contain;
}
```
3. 在JavaScript中添加一个点击事件监听器,当点击图片时,显示视频并播放。
```javascript
var playButton = document.getElementById('play-button');
var videoPlayer = document.getElementById('video-player');
playButton.addEventListener('click', function() {
videoPlayer.style.display = 'block';
videoPlayer.play();
});
```
完整代码如下:
```html
<!DOCTYPE html>
<html>
<head>
<title>Play Video on Click</title>
<style>
#play-button {
cursor: pointer;
width: 100px;
height: 100px;
background: url(play-button.svg) no-repeat center;
background-size: contain;
}
</style>
</head>
<body>
<img src="your-image.jpg" id="play-button">
<video src="your-video.mp4" id="video-player" style="display: none;"></video>
<script>
var playButton = document.getElementById('play-button');
var videoPlayer = document.getElementById('video-player');
playButton.addEventListener('click', function() {
videoPlayer.style.display = 'block';
videoPlayer.play();
});
</script>
</body>
</html>
```
注意:需要将"your-image.jpg"和"your-video.mp4"替换为实际的图片和视频文件路径。