HTML video无法暂停，关闭后音频后台持续播放，添加.pause()方法无效

核心原因 #

你调用.pause()无效的本质原因是：你使用<iframe>标签加载视频文件，浏览器会在iframe内部自动生成原生<video>播放器，外层页面的JS没有权限直接操作iframe内部的DOM元素，自然无法调用内部video元素的pause方法。你原本重置src的逻辑方向是对的，但写法存在浏览器兼容问题，部分浏览器会因为缓存策略不触发iframe重载，导致视频没有停止播放。

解决方案 #

方案1：替换为原生

直接使用原生<video>标签嵌入视频，你可以直接控制播放、暂停逻辑，无需处理iframe的跨层操作问题：

替换后的HTML代码

<div id="video-frame">
    <span id="video-frame-hide" class="fa fa-times"></span>
    <div class="video-frame-container">
        <div class="video-frame-scaler">
            <video id="embed-video" controls>
                <source src="Videos/Female Upper Body.MP4" type="video/mp4">
            </video>
        </div>
    </div>
</div>

修改后的JS代码

videoFrameHide.on('click', () => {
    videoFrame.css({
        'opacity': '0',
        'visibility': 'hidden',
        'z-index': '0' 
    });
    // 直接调用原生video的暂停方法，同时重置播放进度
    embedVideo[0].pause();
    embedVideo[0].currentTime = 0;
});

方案2：保留iframe，修复重置src的逻辑 #

如果必须保留iframe写法，可以通过先清空src再还原的方式强制触发重载，规避浏览器缓存问题：

videoFrameHide.on('click', () => {
    videoFrame.css({
        'opacity': '0',
        'visibility': 'hidden',
        'z-index': '0' 
    });
    // 先暂存原视频地址
    const videoSrc = embedVideo.prop('src');
    // 清空src强制停止播放
    embedVideo.prop('src', '');
    // 下次打开视频时再重新赋值src即可，如需即时还原可添加延迟赋值：
    // setTimeout(() => {embedVideo.prop('src', videoSrc)}, 100)
});

注意事项 #

• 如果你嵌入的是第三方平台的 iframe 视频，需要使用对应平台提供的 iframe API 来控制播放暂停，不能直接操作内部元素。
• 仅设置父容器的opacity、visibility隐藏只是视觉上不可见，iframe元素仍然存在于页面DOM中，播放逻辑不会自动停止，属于浏览器正常行为。

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