移动端js应播放前预判网络并加载合适码率：优先用navigator.connection.effectivetype获取'2g'/'slow-2g'等类型，弱网直切标清；safari等不支持时，fetch探测小文件响应耗时＞2500ms判定弱网。
在移动端用 JS 检测网络环境并自动降低视频初始加载质量，关键不是“等视频出错再降级”，而是**在播放前就预判、预加载合适码率的资源**。核心逻辑是：结合浏览器原生能力 + 轻量探测 + 动态源切换，避免卡顿和流量浪费。
优先读取 navigator.connection.effectiveType
这是最轻量、最快捷的初始判断依据，尤其在 Chrome/Edge/Android WebView 中稳定可用：
-
effectiveType 返回
'2g'、'3g'、'4g'或'slow-2g'，比downlink更可靠（后者延迟高、数值波动大） - 页面加载时立即读取：
const net = navigator.connection?.effectiveType || '4g'; - 若为
'2g'或'slow-2g'，默认跳过高清源，直接加载标清 MP4 或 HLS 的最低码率 playlist（如playlist_360p.m3u8）
fallback 到 fetch 探测带宽（iOS/Safari 必备）
Safari 不支持 navigator.connection，Firefox 支持有限，必须补一手实测：
- 用
fetch请求一个 100–200KB 的小文件（如/probe.bin），记录响应耗时 - 连续两次请求平均耗时 > 2500ms → 判定为弱网；
- 注意加
cache: 'no-store'和 AbortSignal 防止阻塞，超时设为 3s - 探测完成后再调用
video.load()，不提前加载主视频
按网络类型动态选源，不依赖 error 回调
不要等 video.error.code === 2 才行动——那时用户已看到加载 spinner，体验已受损：
- 准备多套视频资源：
video_360p.mp4、video_720p.mp4、HLS 的不同 m3u8 清单 - 根据探测结果设置
video.src或<source></source>的src，再调video.load() - 配合
preload="metadata"（前提是服务端已加faststart），确保封面和时长秒出 - 若用 MSE/HLS 播放器（如 hls.js），直接初始化时传入
startLevel: 0强制起播最低档
移动端特别处理：视口可见才加载
避免页面一打开就全量加载视频，尤其在列表页或折叠区域：
- 用
IntersectionObserver监听视频是否进入视口 - 仅当
isIntersecting === true且网络判定为非弱网时，才执行探测 + 加载 - 滚动离开后可调
video.preload = 'none'并video.load()释放缓冲（可选）
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
