用js实现点击图片播放视频的功能
时间: 2023-06-25 20:08:24 浏览: 91
要实现点击图片播放视频的功能,可以使用HTML5的video标签和JavaScript来实现。具体步骤如下:
1. 在HTML中添加video标签和图片标签,例如:
```
<img src="image.jpg" id="myImage">
<video src="video.mp4" id="myVideo"></video>
```
2. 使用CSS隐藏video标签,例如:
```
#myVideo {
display: none;
}
```
3. 在JavaScript中添加监听器,当图片被点击时,显示video标签并播放视频,例如:
```
var image = document.getElementById('myImage');
var video = document.getElementById('myVideo');
image.addEventListener('click', function() {
video.style.display = 'block';
video.play();
});
```
当图片被点击时,图片会被隐藏,视频会被显示并自动播放。
相关问题
用js实现点击图片播放视频的功能,完整代码
好的,以下是完整的 JavaScript 代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>点击图片播放视频</title>
</head>
<body>
<img src="https://via.placeholder.com/150" id="play-button">
<video src="https://www.w3schools.com/html/mov_bbb.mp4" id="video" style="display:none;"></video>
<script>
const playButton = document.getElementById('play-button');
const video = document.getElementById('video');
playButton.addEventListener('click', function() {
video.style.display = 'block';
video.play();
});
video.addEventListener('ended', function() {
video.style.display = 'none';
});
</script>
</body>
</html>
```
代码解释:
- `img` 标签用于显示播放按钮。
- `video` 标签用于显示视频,设置 `style="display:none;"` 表示一开始不显示。
- `const playButton = document.getElementById('play-button');` 和 `const video = document.getElementById('video');` 用于获取 `img` 和 `video` 元素。
- `playButton.addEventListener('click', function() {...});` 为 `img` 元素添加一个点击事件监听器,当点击时触发播放视频的操作。
- `video.addEventListener('ended', function() {...});` 为 `video` 元素添加一个事件监听器,当视频播放结束时触发隐藏视频的操作。
- `video.play();` 用于开始播放视频。
- `video.style.display = 'none';` 用于隐藏视频。
这样,当用户点击图片时,视频将开始播放,并在播放结束后自动隐藏。
用html+css+javascript实现5.④视频播放控制功能;⑤图片动态(动画或切换或轮播等)功能。
5.视频播放控制功能
HTML代码:
```
<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>
<button onclick="playPause()">播放/暂停</button>
<button onclick="makeBig()">放大</button>
<button onclick="makeSmall()">缩小</button>
<button onclick="makeNormal()">默认大小</button>
<script>
var myVideo = document.getElementById("myVideo");
function playPause() {
if (myVideo.paused)
myVideo.play();
else
myVideo.pause();
}
function makeBig() {
myVideo.width = 960;
}
function makeSmall() {
myVideo.width = 320;
}
function makeNormal() {
myVideo.width = 640;
}
</script>
```
CSS代码:
```
video {
border: 1px solid #ccc;
box-shadow: 0px 0px 5px #999;
}
```
JavaScript代码使用了video元素自带的控制条,同时添加了四个按钮实现播放、暂停、放大、缩小等操作。
6.图片动态功能
HTML代码:
```
<div class="slideshow-container">
<div class="mySlides fade">
<img src="slide1.jpg" style="width:100%">
</div>
<div class="mySlides fade">
<img src="slide2.jpg" style="width:100%">
</div>
<div class="mySlides fade">
<img src="slide3.jpg" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<script>
var slideIndex = 0;
showSlides();
function showSlides() {
var i;
var slides = document.getElementsByClassName("mySlides");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex > slides.length) {
slideIndex = 1
}
slides[slideIndex - 1].style.display = "block";
setTimeout(showSlides, 3000); // 每3秒切换一张图片
}
function plusSlides(n) {
showSlides(slideIndex += n);
}
</script>
```
CSS代码:
```
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
.mySlides {
display: none;
}
.prev,
.next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -22px;
padding: 16px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
.prev:hover,
.next:hover {
background-color: rgba(0, 0, 0, 0.8);
}
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
@-webkit-keyframes fade {
from {
opacity: 0.4
}
to {
opacity: 1
}
}
@keyframes fade {
from {
opacity: 0.4
}
to {
opacity: 1
}
}
```
JavaScript代码实现了轮播图的功能,每隔3秒自动切换一张图片。点击左右箭头可以切换上一张或下一张。CSS代码实现了轮播图的样式。
相关推荐
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![docx](https://img-home.csdnimg.cn/images/20210720083331.png)
![-](https://img-home.csdnimg.cn/images/20210720083327.png)
![-](https://img-home.csdnimg.cn/images/20210720083327.png)
![-](https://img-home.csdnimg.cn/images/20210720083327.png)
![-](https://img-home.csdnimg.cn/images/20210720083327.png)
![-](https://img-home.csdnimg.cn/images/20210720083327.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)