境
<style type="text/css">#papa{
margin: 130px 0 30px calc(50% - 730px);
width: 1286px;
height: 720px;
background:#833;
pointer-events: none;
overflow: hidden;
position: relative;
border: 1px solid rgba(36, 201, 219,.95);
border-radius: 2px;
}
#btnFs {
position: absolute;
right:15px;
bottom:15px;
padding: 6px;
background: green;
color: white;
border: 2px solid white;
border-radius: 8px;
cursor: pointer;
pointer-events: auto;
z-index: 11;
}
#mdiv{top:20px; left:20px;cursor: pointer;pointer-events: auto;
width:98px;height:105px;text-align:center;animation:rot 10s linear infinite;
position: absolute;filter:drop-shadow(#000 0px 0 1px);
z-index: 10;
}
@keyframes rot { to { transform: rotate(2turn);} }
#mdiv:hover {}
#vid1{width: 100%; height: 100%;z-index: 1;
position:absolute;
top:0%; left:0%;
object-fit: cover; pointer-events: none;
}
.vid{width: 100%; height: 100%;z-index: 2;
position:absolute;
top:0%; left:0%;
opacity: 0;object-fit: cover; pointer-events: none;
animation: round 50s linear infinite;}
@keyframes round {0% {opacity: 0;}
4% {
opacity: 1;}
10% {
opacity: 1;}
23% {
opacity: 0;}
}
.vid:nth-child(1){animation-delay: 40s;}
.vid:nth-child(2){animation-delay: 30s;}
.vid:nth-child(3){animation-delay: 20s;}
.vid:nth-child(4) {animation-delay: 10s;}
.vid:nth-child(5) {animation-delay: 0s;}
.stop .vid:nth-child(1),
.stop .vid:nth-child(2),
.stop .vid:nth-child(3),
.stop .vid:nth-child(4),
.stop .vid:nth-child(5){animation-play-state: paused;}
</style >
<div id="papa" >
<img id="mdiv" alt="" src="https://pic.imgdb.cn/item/67335150d29ded1a8c961005.png" title="播放/暂停" />
<video id="vid1" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/scene/d038ac1007f2d25b46b8452f25a0d119_preview.mp4" loop muted autoplay=""></video>
<div id="testImg">
<video class="vid" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/e51180a3f5a8bb36831a87d9ae331269_preview.mp4" loop muted autoplay=""></video>
<video class="vid" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/live/7abe3fd5095bc1027d571313853692c0.mp4
" loop muted autoplay=""></video>
<video class="vid" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/d646b3534d7e0d64f4540be44ba9c145_preview.mp4" loop muted autoplay=""></video>
<video class="vid" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/scene/ac37589f7f2dad8ba2b0d6d9511e775a_preview.mp4" loop muted autoplay=""></video>
<video class="vid" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/bcee4e9355a42b09eeffd2b277cf2024_preview.mp4" loop muted autoplay=""></video>
</div>
<audio id="aud" src="https://s2.ananas.chaoxing.com/sv-w9/audio/12/ce/69/dc048522041006abd3c1b5e250479ee1/audio.mp3" autoplay loop></audio>
<span id="btnFs"></span>
</div>
<script type="module">
import qp from 'https://638183.freep.cn/638183/web/mod/fscreen.js';
qp.fs('papa','btnFs');
</script>
<script>
(function() {
const vids = document.querySelectorAll('.vid');
var mState = () => {
vids.forEach(vid => aud.paused ? vid.pause() : vid.play());
};
aud.onplaying = aud.onpause = () => mState();
})();
mdiv.onclick = () => aud.paused ? (aud.play(),vid1.play() ): (aud.pause(),vid1.pause());
aud.addEventListener('playing', () =>mdiv.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>mdiv.style.animationPlayState = 'paused');
var image = document.getElementById("testImg");
let mState = () => aud.paused ? image.classList.add('stop'):image.classList.remove('stop');
aud.addEventListener('play', () => mState());
aud.ddEventListener('pause', () => mState());
</script>
嵌入多个视频让画面更加灵动唯美，音乐节奏感强，赞，问好老师！ 欣赏收藏老师的[代码佳作]好看又好听，点赞！ 容轩听雨 发表于 2024-11-17 19:45
嵌入多个视频让画面更加灵动唯美，音乐节奏感强，赞，问好老师！
谢谢容轩听雨版主鼓励，祝开心 巫荣云师 发表于 2024-11-17 20:55
欣赏收藏老师的[代码佳作]好看又好听，点赞！
谢谢巫荣云师友友鼓励，祝开心 欣赏好看的帖子，曲曲好听，辛苦了！欣赏问好！ 谢谢么念超版支持与鼓励，祝福开心每一天
页:
[1]