HTML5 视频网站 - 点击图片播放视频 - 带示例代码 - 常规

<!DOCTYPE html>
<html>
<head>
<title>自用视频网站</title>
<style>
/* CSS样式 */
.video-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
display: flex;
align-items: center;
justify-content: center;
}
.video-container video {
width: 1080px;
height: 1080px;
}
.image-container {
display: flex;
flex-wrap: wrap;
}
.image-container img {
width: 540px;
height: 540px;
object-fit: cover;
cursor: pointer;
}
</style>
</head>
<body>
<div class="image-container">
<img src="YP-001.jpg" onclick="playVideo('非人地铁控诉法国.mp4')">
<img src="YP-001.jpg" onclick="playVideo('非人地铁控诉法国.mp4')">
<img src="YP-001.jpg" onclick="playVideo('非人地铁控诉法国.mp4')">
<img src="YP-001.jpg" onclick="playVideo('非人地铁控诉法国.mp4')">
<img src="YP-001.jpg" onclick="playVideo('非人地铁控诉法国.mp4')">
<img src="YP-001.jpg" onclick="playVideo('非人地铁控诉法国.mp4')">
<img src="YP-001.jpg" onclick="playVideo('非人地铁控诉法国.mp4')">
<img src="YP-001.jpg" onclick="playVideo('非人地铁控诉法国.mp4')">
<img src="YP-001.jpg" onclick="playVideo('非人地铁控诉法国.mp4')">
<img src="YP-001.jpg" onclick="playVideo('非人地铁控诉法国.mp4')">
<img src="YP-001.jpg" onclick="playVideo('非人地铁控诉法国.mp4')">
<img src="YP-001.jpg" onclick="playVideo('非人地铁控诉法国.mp4')">
</div>
<div class="video-container" id="videoContainer">
<video controls="controls" autoplay="autoplay">
<source src="非人地铁控诉法国.mp4" type="video/mp4">
</video>
</div>
<script>
// JavaScript代码
function playVideo(videoSrc) {
var videoContainer = document.getElementById("videoContainer");
var video = videoContainer.querySelector("video");
video.src = videoSrc;
videoContainer.style.display = "flex";
}

document.getElementById("videoContainer").addEventListener("click", function(event) {
if (event.target === this) {
this.style.display = "none";
}
});
</script>
</body>
</html>