【漫步特效】爱我中华几种视频界面播放效果
<div style="LEFT:-490px; WIDTH: 1660px; POSITION: relative; TOP: 150px">
<div style="position: relative; width: 1300px; height: 700px; margin: 0 auto;">
<!-- png图片背景 --->
<img src="https://s21.ax1x.com/2025/07/14/pV1CJDU.png"
style="width: 100%; height: 100%; object-fit: contain; position: absolute; top: 0; left: 0; z-index: 2;"
alt="云端漫步设计">
<!-- 嵌入视频 - 设为内层 -->
<video id="bgVideo" src="https://img.tukuppt.com/video_show/2269348/00/02/39/5b5dc8e4eb1e3.mp4"
loop playsinline
style="position: absolute;
top: 80px;(顶部);
left: 20px;(左部);
right: 80px;(右边);
bottom: 80px;(底部);
width: calc(80% - 80px); (宽度);
height: calc(80% - 80px);(高度);
object-fit: contain;
z-index: 1;">
</video>
<!-- 新增视频控制图标 -->
<div style="position: absolute; bottom: 110px; right: 110px; z-index: 3; cursor: pointer;" onclick="togglePlay()">
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" fill="white" viewBox="0 0 24 24">
<path id="playIcon" d="M8 5v14l11-7z"></path>
<path id="pauseIcon" d="M6 19h4V5H6v14zm8-14v14h4V5h-4z" style="display: none;"></path>
</svg>
</div>
</div>
</div>
<script>
// 视频播放控制函数
function togglePlay() {
const video = document.getElementById('bgVideo');
const playIcon = document.getElementById('playIcon');
const pauseIcon = document.getElementById('pauseIcon');
if (video.paused) {
video.play();
playIcon.style.display = 'none';
pauseIcon.style.display = 'block';
} else {
video.pause();
playIcon.style.display = 'block';
pauseIcon.style.display = 'none';
}
}
</script> <div style="position:absolute;z-index:32768;background:none;width:100%;left:0px;margin-top:150px;"><center><IFRAME src="https://webftp-bbs.hnol.net/ggkj2017/yunduanmanbu/16/5/wdw.html" width="1300" height="1100" marginWidth="0" marginHeight="0" frameBorder="0" scrolling="no"></IFRAME></center></div><div style="height:800px"></div><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR></td></tr></table>
</div>
富有新意，谢谢醉美管理员精彩分享 klxf 发表于 2025-7-16 20:21
富有新意，谢谢醉美管理员精彩分享
友友晚上好！谢谢支持！ 分享超实用，必须来点赞
页:
[1]