这个问题其实是iOS平台（包括Safari、Chrome、Firefox等所有基于WebKit内核的浏览器）的媒体播放安全限制导致的，我之前做类似需求时也踩过这个坑😅。

核心原因 #

iOS的WebKit引擎对媒体播放有严格的限制：所有媒体内容的播放必须由用户的明确交互动作（比如点击、触摸）触发，而ended事件属于非用户直接触发的回调，在这个回调里调用play()会被浏览器判定为“自动播放”，直接阻止执行——这就是你看到Video_2.play()无效的根本原因。

另外，你当前代码里用loadedmetadata事件触发第一个视频的播放，其实在iOS上也是不符合规则的（除非视频是静音+inline模式），可能你实际测试时页面有其他用户交互触发了播放，才让第一个视频能正常运行。

解决方案 #

要让连续播放在iOS上生效，关键是要把后续播放的逻辑绑定到同一个用户交互上下文里，具体步骤如下：

1. 用用户交互触发初始播放

把第一个视频的播放逻辑放到用户明确的操作（比如按钮点击、页面触摸）里，而不是loadedmetadata事件。

2. 预加载第二个视频

提前加载第二个视频的元数据和内容，确保第一个视频结束时它已经准备好播放。

3. 在用户交互上下文内绑定ended事件

在触发初始播放的同一个用户交互回调里，监听第一个视频的ended事件，这样后续的play()会被浏览器判定为合法操作。

修改后的完整代码 #

HTML部分

<div id="DIV_video">
    <video id="ID_Video_1" playsinline class="CLASS_Video" width="150" src="http://www.w3schools.com/html/movie.mp4"></video>
    <video id="ID_Video_2" playsinline preload="auto" class="CLASS_Video" width="150" src="http://www.w3schools.com/html/mov_bbb.mp4"></video>
</div>
<!-- 添加启动按钮，确保用户交互触发 -->
<button id="btn_start">Start Playing</button>

CSS部分（保持你的原有样式即可）

#DIV_video {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 430px;
    height: 270px;
}
.CLASS_Video {
    position: absolute;
    top: 0;
    left: 0;
}
#ID_Video_1 {
    visibility: visible;
    z-index: 1;
}
#ID_Video_2 {
    visibility: hidden;
    z-index: 2;
}
#btn_start {
    position: absolute;
    z-index: 10;
    padding: 10px 20px;
    font-size: 16px;
}

JavaScript部分

const Video_1 = document.getElementById("ID_Video_1");
const Video_2 = document.getElementById("ID_Video_2");
const startBtn = document.getElementById("btn_start");

// 仅在用户点击按钮时启动播放，符合iOS的安全规则
startBtn.addEventListener('click', async function() {
    // 隐藏启动按钮
    startBtn.style.display = 'none';

    try {
        // 启动第一个视频
        await Video_1.play();
        console.log("第一个视频开始播放");

        // 预加载第二个视频的元数据
        await Video_2.load();
        console.log("第二个视频已完成预加载");

        // 在用户交互上下文内绑定ended事件（只监听一次）
        Video_1.addEventListener('ended', async function() {
            console.log("第一个视频播放结束");
            // 切换视频可见性
            Video_1.style.visibility = "hidden";
            Video_2.style.visibility = "visible";
            
            try {
                // 播放第二个视频
                await Video_2.play();
                console.log("第二个视频开始播放");
            } catch (err) {
                console.error("第二个视频播放失败:", err);
            }
        }, { once: true });
    } catch (err) {
        console.error("第一个视频播放失败:", err);
    }
});

// 监听视频元数据加载状态
Video_1.addEventListener('loadedmetadata', function() {
    console.log("第一个视频元数据加载完成");
});

Video_2.addEventListener('loadedmetadata', function() {
    console.log("第二个视频元数据加载完成");
});

额外注意事项 #

• 确保两个视频都设置了playsinline属性：这个属性可以防止视频自动进入全屏模式，全屏播放结束后iOS会丢失播放上下文，导致后续播放失败。
• 用async/await处理play()和load()的Promise：这两个方法都返回Promise，可以更清晰地处理异步操作，同时捕获播放失败的错误信息，方便调试。

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