游戏场景切换时删除重建含视频的角色Div后新元素视频无法播放问题

看起来你遇到的问题主要来自几个DOM操作的细节和视频播放的异步处理漏洞，我来帮你一步步拆解并修复：

问题根源分析 #

1. 删除元素时的循环漏洞：你原来的正序遍历mainFrame.children会导致部分元素无法被删除——每次删除一个子元素后，children数组会重新索引，后续元素前移，正序的i++会直接跳过下一个元素。
2. DOM元素引用错误：创建新元素时依赖mainFrame.children[i]访问刚创建的节点，如果之前的元素没删干净，或者DOM结构有其他变化，这个索引会指向错误的元素。
3. 未处理的播放Promise：video.play()返回一个Promise，当播放请求被打断（比如之前的pause操作还未完成）时会抛出未捕获的异常，这就是你看到的DOMException。
4. 手动循环的不可靠性：通过监听ended事件手动调用play()，不如使用视频原生的loop属性稳定。

修复后的完整代码 #

function applyFrame() {
    // 彻底删除所有旧角色元素，确保清理干净
    while (mainFrame.firstChild) {
        const childDiv = mainFrame.firstChild;
        const videoElem = childDiv.children[0];
        // 停止视频并清理事件监听（避免内存泄漏）
        if (videoElem instanceof HTMLVideoElement) {
            videoElem.pause();
            videoElem.removeEventListener("ended", null);
        }
        mainFrame.removeChild(childDiv);
    }

    // 创建新角色元素
    currentFrame.objects.forEach(obj => {
        const elem = document.createElement("div");
        elem.style.opacity = "0";
        mainFrame.appendChild(elem);

        const video = document.createElement("video");
        video.classList.add("elemVideo");
        // 开启预加载，提升切换场景后的播放速度
        video.preload = "auto";
        elem.appendChild(video);

        if (obj.video && obj.video.trim() !== "") {
            // 用find替代for循环，更简洁高效
            const targetBlob = animationBlobsGLOB.find(blob => blob.name === obj.video);
            if (targetBlob) {
                video.src = targetBlob.blob;
                // 使用原生loop属性，替代手动监听ended事件
                video.loop = true;

                // 处理视频加载完成事件，确保视频准备好再播放
                video.addEventListener("loadedmetadata", () => {
                    // 尝试播放并捕获异常
                    video.play().catch(err => {
                        console.warn("视频播放请求被拦截:", err);
                        // 应对浏览器自动播放限制：可以在这里添加用户交互触发播放的逻辑
                        // 比如监听页面点击事件，第一次点击后再播放所有视频
                    });
                    // 视频加载完成后显示元素
                    elem.style.opacity = "1";
                });
            }
        }
    });
}

关键修改点说明 #

• 可靠的元素删除：用while (mainFrame.firstChild)循环确保所有子元素都被删除，不会因为数组索引变化遗漏任何节点。
• 直接引用创建的节点：使用elem和video变量直接操作，避免依赖mainFrame.children[i]的索引错误，代码更健壮。
• 原生loop属性：替代手动监听ended事件，更符合浏览器的视频播放机制，减少出错概率。
• 处理播放Promise：捕获play()的异常，避免控制台报错，同时可以应对浏览器的自动播放限制（很多现代浏览器要求用户交互后才能自动播放视频）。
• 预加载与加载完成事件：设置preload="auto"让视频提前加载，监听loadedmetadata确保视频准备就绪后再播放并显示元素，提升用户体验。

额外优化建议 #

如果遇到浏览器自动播放限制导致视频无法播放，可以在页面初始化时添加一个全局的用户交互监听，比如：

document.addEventListener("click", () => {
    // 第一次点击后，播放所有当前场景的视频
    document.querySelectorAll(".elemVideo").forEach(video => {
        if (!video.paused) return;
        video.play().catch(err => console.warn(err));
    });
}, { once: true });

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