但是受限 一些问题比如 播放没声音 设置只播放一次 加载代码之后视频就播放完成了。
我也试过让视频等几秒播放但好像一没法实现。
我写的代码
<style>
#custom-video-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #37c6e3;
z-index: 9999;
display: flex;
justify-content: center;
align-items: center;
transition: visibility 0s 1s, opacity 1s linear; /* 添加过渡效果 */
visibility: visible;
opacity: 1;
}
#custom-video {
width: 100%; /* 设置宽度为100% */
height: auto; /* 高度自动适应 */
}
</style>
</head>
<body>
<div id="custom-video-container">
<video id="custom-video" autoplay muted>
<source src="https://www.justnainai.com/uploads/default/original/2X/5/53cb6cce1dc455cb336ea969ddf7c3195549633c.mp4" type="video/mp4">
</video>
</div>
<script>
document.addEventListener('DOMContentLoaded', () => {
const videoContainer = document.getElementById('custom-video-container');
const video = document.getElementById('custom-video');
video.addEventListener('ended', () => {
setTimeout(() => {
videoContainer.style.visibility = 'hidden';
videoContainer.style.opacity = '0';
}, 10); // 视频结束后3秒钟隐藏
});
});
</script>
</body>
</html>
