视频播放时禁用页面滚动，结束后恢复并显示内容的实现求助

先修正原代码里的几个问题 #

1. 视频标签的onEnded要改成小写的onended，autoplay属性无需赋值，直接声明即可
2. WebM格式视频的type属性要对应写成video/webm，和文件格式匹配
3. 移除多余的闭合括号，合并零散脚本，避免语法错误
4. 将滚动禁用/恢复逻辑和视频播放状态绑定，替代固定超时，更可靠

完整代码实现 #

<div id="loginVideoLayer" class="loginvideoLayer">
    <video id="loginVideo" height="100%" width="100%" playsinline muted autoplay onended="handleVideoEnd()">
        <source src="Delivery-B-02-End-Transparent.webm" type="video/webm">
    </video>
</div>

<!-- Hero区块初始设置为隐藏 -->
<div id="hide" style="visibility: hidden;">
    <!-- 这里放置Hero区块内容 -->
</div>

<script>
// 获取页面元素
const videoLayer = document.getElementById('loginVideoLayer');
const heroSection = document.getElementById('hide');
const loginVideo = document.getElementById('loginVideo');

// 页面加载完成后初始化
window.addEventListener('DOMContentLoaded', () => {
    // 初始禁用页面滚动
    document.body.style.overflow = 'hidden';

    // 监听视频播放事件，确保播放期间滚动始终禁用
    loginVideo.addEventListener('play', () => {
        document.body.style.overflow = 'hidden';
    });
});

// 视频结束后的统一处理逻辑
function handleVideoEnd() {
    // 隐藏视频层
    videoLayer.style.visibility = 'hidden';
    // 显示Hero区块
    heroSection.style.visibility = 'visible';
    // 恢复页面滚动
    document.body.style.overflow = 'auto';
}

// 超时兜底：若视频加载异常，5.5秒后强制执行结束逻辑
setTimeout(handleVideoEnd, 5500);
</script>

关键说明 #

• Hero区块初始需设置visibility: hidden，保证页面加载时不显示
• 通过视频的play和ended事件绑定滚动控制，无论视频加载快慢，都能精准控制滚动状态
• 保留超时处理作为兜底方案，避免视频加载失败导致页面长期无法滚动
• 合并所有脚本到一个标签内，更便于维护

内容的提问来源于stack exchange，提问作者Rjay Artates