如何实现HTML5 Video仅在WiFi/网络下播放且弱网自动缓冲功能？

完全可以实现你描述的类YouTube分片缓冲、弱网自适应、网络环境感知的HTML Video播放能力，所有逻辑都可以基于浏览器原生API实现，无需依赖特定第三方服务。

• 视频分片传输：采用HLS或DASH标准将完整视频切割为2~10秒的小分片，配套生成索引文件（.m3u8/.mpd），播放器不用一次性加载全量视频，仅按需加载当前播放点前后的分片，弱网下可自动切换低码率分片降低加载压力。
• 预缓冲触发逻辑：将预加载动作绑定到可预测的用户行为（如视频滚动进入视口、用户鼠标悬停在播放控件上），提前加载前1_{2个分片，用户点击播放即可秒开；可根据网络环境调整预加载长度，WiFi环境下预加载3}5个分片提升播放流畅度，移动数据环境下仅预加载1个分片避免流量浪费。
• 网络状态感知：调用原生navigator.connection API获取当前网络类型、有效带宽、往返延迟等参数，检测到弱网（如下行速度<1Mbps、rtt>500ms、有效网络类型为2g/3g）时，自动调高缓冲阈值，等缓冲内容足够播放5秒以上再恢复播放，减少卡顿次数。

// 获取当前网络状态
const getCurrentNetwork = () => {
  const conn = navigator.connection || navigator.mozConnection || navigator.webkitConnection
  if (!conn) return {
    type: 'unknown',
    effectiveType: '4g',
    downlink: 2,
    rtt: 200
  }
  return {
    type: conn.type, // 网络类型：wifi/cellular/ethernet等
    effectiveType: conn.effectiveType, // 有效网络等级：2g/3g/4g/5g
    downlink: conn.downlink, // 下行速度，单位Mbps
    rtt: conn.rtt // 网络往返延迟，单位ms
  }
}

// 根据网络状态调整缓冲策略
let preloadSegmentCount = 2
const adjustBufferConfig = (videoEl) => {
  const netInfo = getCurrentNetwork()
  // 弱网场景
  if (netInfo.effectiveType === '2g' || netInfo.downlink < 0.5) {
    preloadSegmentCount = 1
    videoEl.bufferedAmountLowThreshold = 5 * 1024 * 1024 // 缓冲满5M再恢复播放
  } 
  // WiFi场景
  else if (netInfo.type === 'wifi') {
    preloadSegmentCount = 3
    videoEl.bufferedAmountLowThreshold = 3 * 1024 * 1024 // 缓冲满3M即可播放
  }
  // 普通移动网络场景
  else {
    preloadSegmentCount = 2
    videoEl.bufferedAmountLowThreshold = 4 * 1024 * 1024
  }
}

• 不要直接使用原生video标签的preload="auto"属性，该属性的缓冲逻辑由浏览器自主控制，无法自定义分片加载规则，弱网场景下可能出现加载过多内容浪费流量、或者缓冲不足频繁卡顿的问题。
• 配合MediaSource Extensions (MSE) API可以完全自主控制缓冲队列，手动管理分片的下载、拼接、过期丢弃，和YouTube的底层实现逻辑一致，可以实现100%自定义的缓冲策略。
• 移动端部分浏览器限制非用户交互触发的媒体资源加载，建议将预缓冲触发逻辑绑定到用户滚动页面、点击页面空白处等交互动作上，避免预加载请求被浏览器拦截。

内容的提问来源于stack exchange，提问作者WilliamLee