蘑菇影视官网横屏切换时倍速从不稳定到很稳：我只做了两步

在移动端使用蘑菇影视看视频时，很多用户反馈一个常见问题：横屏切换时倍速播放会忽然变回默认速度、卡顿或完全失效。这个问题看起来复杂，但我用两步就把官网上的倍速稳定下来了。下面把实战经验和可直接复制的代码给你，便于立刻落地。

问题核心（一句话概括）

横屏切换通常伴随重排、视频元素被重建或进入系统原生播放器，从而导致 playbackRate 丢失或被忽略。解决思路就是：避免重建 + 在合适时机恢复并强制应用倍速。

我做的两步步骤一：保持视频元素不被重建并“记住-恢复”状态做法要点

在横竖屏切换期间，不用拆掉或替换
在切换开始前记录当前 playbackRate、currentTime 等状态；切换结束后恢复这些状态，并在视频可播放时重新设置 playbackRate。

示例代码（核心片段） // 假设 video 是页面中的元素 const video = document.querySelector('video'); let stored = { rate: 1, time: 0 }; let resizeTimer = null;

function saveState() { stored.rate = video.playbackRate || 1; stored.time = video.currentTime || 0; }

// 在下一帧和 canplay 事件后都尝试一次，覆盖各种浏览器行为 requestAnimationFrame(apply); video.addEventListener('canplay', function onCan() { apply(); video.removeEventListener('canplay', onCan); }); }

// 监听横竖屏或尺寸变化，去抖处理 window.addEventListener('orientationchange', () => { saveState(); clearTimeout(resizeTimer); resizeTimer = setTimeout(() => { restoreState(); }, 300); // 300ms 去抖，根据需要调整 }); window.addEventListener('resize', () => { saveState(); clearTimeout(resizeTimer); resizeTimer = setTimeout(() => { restoreState(); }, 300); });

说明

关键是保存当前的 playbackRate 并在布局稳定后重新赋值；去抖是为了避免多次触发带来的状态错乱。
不要在切换过程中销毁或替换 video 节点，这通常是倍速丢失的直接原因。

步骤二：启用行内播放并避免进入系统原生全屏（针对移动端兼容性）做法要点

iOS Safari 等浏览器的原生全屏通常会启用系统播放器，这类原生播放器往往不支持通过 JS 修改 playbackRate。要保证倍速可控，应尽量使用行内播放（playsinline）与自定义“模拟全屏”样式，而不是触发系统全屏。
通过 CSS 与属性配合，让视频在横屏时视觉上占满屏幕，但仍保持在页面 DOM 内。

HTML / 属性

CSS（模拟全屏） .video-fullscreen { position: fixed; top: 0; left: 0; width: 100vw; /* 或 100% 根据需求 / height: 100vh; z-index: 9999; object-fit: contain; / 或 cover */ background: black; }

JS：进入/退出“行内全屏” function enterInlineFullscreen() { video.classList.add('video-fullscreen'); // 恢复倍速 video.playbackRate = stored.rate || 1; } function exitInlineFullscreen() { video.classList.remove('video-fullscreen'); }

额外兼容提示

iOS：如果必须使用系统全屏（如用户习惯），请知晓系统全屏可能无视 playbackRate。在这种情况下，只能提示用户或提供页面行内全屏替代方案。
Android Chrome：一般支持 JS 设置 playbackRate，但也可能在某些 OEM 浏览器上有差异，需多机型测试。
在进入或退出“真实”全屏（fullscreenchange、webkitbeginfullscreen 等事件）时，也要调用 saveState()/restoreState() 做兜底。

最终效果与验证

在我把这两步上线后，蘑菇影视官网的横屏倍速问题基本消失：切换过程无重置、无闪回默认速率，用户可流畅在 0.5x–2.0x 之间切换并保持稳定。
验证方法：在多款手机上做三项测试（1. 直接横屏切换；2. 横屏进入/退出自定义全屏；3. 横屏时切换倍速并切后台再回来），均能保持 playbackRate 不被重置。

总结（一句话）

不去重建视频元素 + 行内播放并在布局稳定后强制恢复播放状态，这两步就能把横屏切换时的倍速不稳定问题彻底改善。

蘑菇影视官网横屏切换时倍速从不稳定到很稳：我只做了两步

相关文章