用js实现点击图片播放视频的功能
时间: 2023-11-27 09:51:59 浏览: 100
要实现点击图片播放视频的功能,可以使用HTML5的video标签和JavaScript来完成。具体步骤如下:
1. 在HTML中添加一个图片元素和一个视频元素,并将视频元素设置为隐藏:
```html
<img src="image.jpg" id="video-btn">
<video id="video" style="display:none;">
<source src="video.mp4" type="video/mp4">
</video>
```
2. 使用JavaScript获取图片元素和视频元素,然后为图片元素添加点击事件:
```javascript
var videoBtn = document.getElementById("video-btn");
var video = document.getElementById("video");
videoBtn.addEventListener("click", function() {
video.style.display = "block";
video.play();
});
```
3. 当图片被点击时,将视频元素的显示属性设置为block,并调用play()方法播放视频。
完整的代码如下:
```html
<!DOCTYPE html>
<html>
<head>
<title>Click Image Play Video</title>
</head>
<body>
<img src="image.jpg" id="video-btn">
<video id="video" style="display:none;">
<source src="video.mp4" type="video/mp4">
</video>
<script>
var videoBtn = document.getElementById("video-btn");
var video = document.getElementById("video");
videoBtn.addEventListener("click", function() {
video.style.display = "block";
video.play();
});
</script>
</body>
</html>
```
注意:在使用video标签时,需要提供视频的源文件地址。在本例中,视频文件为video.mp4。另外,不同浏览器对视频格式的支持也不同,建议提供多种格式的视频文件以便更好地兼容不同的浏览器。
阅读全文