HTML5离线视频网站：图片点击弹出可调节窗口播放视频
<!DOCTYPE html>
<html>
<head>
<title>自用视频网站</title>
<style>
/* 设置图片容器样式 */
.image-container {
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
<pre><code> /* 设置每个图片样式 */
.image-container img {
width: 30%;
height: auto;
margin: 10px;
cursor: pointer;
}
/* 设置视频弹出窗口样式 */
.video-popup {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7);
display: flex;
justify-content: center;
align-items: center;
z-index: 9999;
}
/* 设置视频播放器样式 */
.video-popup video {
max-width: 80%;
max-height: 80%;
}
</style>
</code></pre>
</head>
<body>
<div class="image-container">
<img src="D:\PR\picture\YP\YP-001.jpg" alt="Image 1" onclick="openVideo('D:\PR\VIDEO-1\烟花.mp4')">
<!-- 其他11张图片 -->
</div>
<pre><code><div id="videoPopup" class="video-popup" style="display: none;">
<video controls autoplay></video>
</div>
<script>
function openVideo(videoPath) {
var videoPopup = document.getElementById('videoPopup');
var videoElement = videoPopup.querySelector('video');
videoElement.src = videoPath;
videoPopup.style.display = 'flex';
}
// 当点击窗口以外的区域时，关闭视频弹出窗口
window.addEventListener('click', function(event) {
var videoPopup = document.getElementById('videoPopup');
var videoElement = videoPopup.querySelector('video');
if (event.target == videoPopup) {
videoElement.pause();
videoElement.src = '';
videoPopup.style.display = 'none';
}
});
</script>
</code></pre>
</body>
</html>
原文地址: https://www.cveoy.top/t/topic/pp3h 著作权归作者所有。请勿转载和采集!