需监听Layui tab切换事件，缓存上一lay-id，依此定位旧Tab内video元素并调用pause()；推荐iframe[data-frameid]匹配或layui-tab-item[lay-id]查找；注意跨域限制与加载时机，必要时用postMessage通信。
要在用户切换 Layui Tab 时自动暂停旧 Tab 中的视频播放，核心思路是：**监听 tab 切换事件 → 找到上一个激活 Tab 对应的 iframe 或 DOM 区域 → 定位其中的
监听 tab 切换并记录上一次激活项
使用 element.on('tab(filterName)') 监听切换，并在回调中缓存前一次的 lay-id：
- 声明全局变量 let lastActiveId = null（初始为 null，非空字符串）
- 每次触发事件时，先获取当前 tab 的 lay-id：const currId = $(data.elem).attr('lay-id')
- 若 lastActiveId 不为空，说明有“旧 Tab”，此时进入暂停逻辑
- 执行完暂停后，再更新 lastActiveId = currId
精准定位旧 Tab 内的 video 元素
不能遍历所有 video，也不能依赖 iframe 顺序。推荐两种可靠方式：
-
方式一（推荐）：iframe + data-frameid 匹配
旧 Tab 标题为<li lay-id="video-page">视频页</li>，对应 iframe 写为<iframe data-frameid="video-page" src="video.html"></iframe>。
暂停时用：$('iframe[data-frameid="' + lastActiveId + '"]').contents().find('video').each(function(){ this.pause(); }); -
方式二：DOM 区域内查找（适合非 iframe 加载）
若 Tab 内容是直接写在.layui-tab-item里的 HTML，则通过 lay-id 找到对应内容区：$('.layui-tab-content .layui-tab-item[lay-id="' + lastActiveId + '"] video').each(function(){ this.pause(); });
注意跨域与加载时机问题
如果视频页在 iframe 中且与主站不同源，contents() 会报错，此时无法控制其内部 video。应对方案：
- 确保视频页与主页面同域（开发阶段可配置代理或本地服务）
- 若必须跨域，改由子页面自身监听 visibilitychange 或接收父页 postMessage 指令：
主页发送：iframe.contentWindow.postMessage({action: 'pause'}, '*');
子页监听：window.addEventListener('message', e => { if(e.data.action === 'pause') document.querySelector('video')?.pause(); }); - 避免在 iframe 尚未加载完成时调用 pause()，可加简单延时或检查
iframe.readyState === 'complete'
补充：主动触发暂停的边界情况
以下情况也建议统一处理，提升体验一致性：
- 用户关闭当前 Tab 前：在 tabDelete() 前先按 lay-id 查找并暂停对应 video
- 页面失焦时（如切到其他浏览器标签）：document.addEventListener('visibilitychange') 中暂停所有正在播放的 video
- Tab 内视频自动播放被拦截时，不要依赖 autoplay 属性，改用用户手势（如点击）后显式 play()
