必须为video标签添加transform: translateZ(0)强制创建独立GPU合成层，否则所有优化无效；同时需修正JS播放逻辑、适配X5内核属性并确认运行在极速模式。
百度浏览器播放HTML5视频时出现画面撕裂，表现为横向错位、上下半屏不同步或拖动后残留上一帧残影，本质是X5内核强制启用硬件加速后GPU合成层未对齐屏幕刷新率，需从CSS图层控制、JS调用时机与内核适配三方面同步干预。
给video标签加强制GPU图层分离
这一步必须做，否则后续所有优化都无效。X5内核默认将video强行提至独立图形层，但不保证该层与主渲染流同步，【必须用transform: translateZ(0)显式创建新合成层】，让浏览器明确知道“这个video要单独走GPU管线”。
在video元素的style属性中直接添加：style="transform: translateZ(0); backface-visibility: hidden;"。
若使用外部CSS，选择器优先级必须高于框架默认样式，例如写成 video[controls] { transform: translateZ(0); backface-visibility: hidden; }，避免被覆盖。
立即学习“前端免费学习笔记（深入）”；
注意：不要加filter、opacity动画或clip-path剪裁，这些会频繁触发图层重组，反而加剧撕裂。
修正html5play函数中的JS调用逻辑
撕裂常发生在js控制播放的瞬间，尤其是手动设置currentTime后立刻调用play()，会打断浏览器渲染流水线。
百度能力集合，提供百度搜索和百度地图路线规划功能，包含网页搜索、路线规划和附近场所推荐，适用于搜索网页、规划出行路线及查找附近餐饮、景点、酒店等位置服务。
方法一：用await确保加载就绪
把原来video.currentTime = 10; video.play();改成：
await video.play();
video.currentTime = 10;
方法二：监听canplay事件再操作
video.addEventListener('canplay', () => {
video.currentTime = 10;
video.play();
});
方法三：禁用危险组合
【绝对不要在scroll/mousemove回调里反复调用html5play】，这类高频触发会挤占requestAnimationFrame时间片，导致帧率失控。加setTimeout(fn, 0)节流，或改用requestIdleCallback包装。
适配X5内核专属属性与内核模式
第一步：确认video标签已声明x5-playsinline和x5-video-player-type="h5"
缺少x5-playsinline会导致X5内核忽略playsinline，强制全屏并劫持层级，撕裂概率翻倍。
第二步：检查当前是否运行在极速模式
地址栏右侧闪电图标必须为闪烁状态；若显示“E”，说明正运行IE/Trident兼容内核，HTML5 video根本不会解析——此时任何CSS或JS修复都无效。
第三步：关闭硬件加速并彻底退出进程
设置→高级设置→关闭“使用硬件加速模式”→【必须在任务管理器中结束所有baidu.exe进程，仅关闭窗口不行】→重启浏览器测试。这一步能快速验证是否为GPU驱动冲突所致。
