教学视频倍速播放需监听loadedmetadata事件后设置playbackrate，避开ios音频限制（仅支持0.5/1.0/1.5/2.0），推荐0.75–2.0区间，配合localstorage记忆档位、实时显示与降级提示确保体验。
直接用 video.playbackRate 实现教学视频倍速播放，本身不改变音画内容，但“不失真”不是自动达成的——它高度依赖浏览器支持、音频轨道处理和用户操作时机。关键在于避开失真诱因，而非追求无损。
确保基础可用：加载完成再设速
很多教学视频一打开就卡在1.0×，根本调不了速，是因为过早赋值。元数据（时长、分辨率、音轨信息）没加载完，playbackRate 设置会被忽略，且不报错。
- 必须监听
loadedmetadata或canplay事件后再设置速率，例如：video.addEventListener('loadedmetadata', () => { video.playbackRate = 1.25; }); - 避免写成页面加载即执行：
video.playbackRate = 1.25;（此时readyState === 0，无效） - 若使用自定义控件，首次点击“1.25×”按钮时再设速，比自动初始化更稳妥
避开失真高发区：音频与iOS限制
教学视频通常带讲解人声，而失真多出现在语速加快后音调尖锐、含混或断续——这往往不是JS的问题，而是浏览器对音频重采样的能力边界。
- iOS Safari（包括所有微信内嵌WebView）对带音频的视频，仅允许 0.5 / 1.0 / 1.5 / 2.0 这几个离散值；设 1.25 或 1.75 会静默回落到 1.0，看起来“没反应”，实则被系统拦截
- Chrome 桌面版支持 0.0625–16.0 的连续值，但超过 2.0 后人声易发飘、齿音加重，建议教学场景守住 0.75–2.0 区间
- 如需强保音质，可提前导出无音频的教学视频（仅画面+字幕），此时倍速对画面无影响，完全不会失真
提升教学体验的实用设计
学生反复切换倍速是常态，光能调不够，得调得准、看得清、记得住。
- 提供明确档位按钮：0.75×（精听）、1.0×（跟读）、1.25×（复习）、1.5×（速览），避免开放输入框——用户输错小数点或超出范围反而导致意外失真
- 每次切换后立刻更新显示文字，比如“当前：1.25×”，不要等
ratechange事件（它不一定触发） - 用
localStorage记住上次选择：localStorage.setItem('teachRate', '1.25')，下次打开自动恢复，减少操作中断学习流 - 禁用负数（-1.0）和 0（暂停），HTML5 不保证反向播放稳定性，尤其教学视频无需倒放
兜底与验证：设完一定要读回来
你以为设了 1.25 就生效了？浏览器可能已悄悄截断或降级。教学场景不容“以为”。
- 设置后立即读取并比对：
if (video.playbackRate !== 1.25) { console.warn('实际生效速率：', video.playbackRate); } - 若发现未生效（如 iOS 返回 1.0），可主动降级到最近支持值（如 1.5），并提示：“已切换至设备支持的最接近速度”
- 对老旧 Android WebView 或 IE11，检测
typeof video.playbackRate === 'number'，不支持则隐藏倍速按钮，避免误导
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
