HTML5网页发布到公网需三步：选静态托管平台（如COS/OSS/Vercel）、完整上传含视频等资源并设index.html为默认文档、配置域名解析与CDN加速；注意CORS、preload策略、视频编码（H.264）、HTTP/2及Accept-Ranges响应头。
HTML5网页怎么发布到公网？关键就三步
不是上传完就算发布，得让别人能通过域名访问到你的 index.html。最直接的路径是：买个带静态托管能力的服务器或空间（比如腾讯云COS、阿里云OSS、Vercel、GitHub Pages），把整个项目文件夹（含 video/、css/、js/）压缩上传，再配置好默认文档为 index.html。注意别漏掉视频文件本身——很多人只传了 HTML 和 JS，结果打开页面黑屏或报 404 Not Found。
- 本地双击
index.html能播 ≠ 发布后能播：浏览器本地打开禁用跨域，但 HTTP 服务会校验CORS，视频资源必须同源或服务端加Access-Control-Allow-Origin: * - GitHub Pages 默认不支持大文件（>100MB），超限视频会上传失败，建议改用 COS/OSS 或 Vercel
- 域名解析要等 DNS 生效（通常几分钟到几小时），别刚绑完就刷新页面说“没发布成功”
HTML5视频卡顿，先看是不是加载方式错了
卡顿不等于网速差，大概率是 标签没配对。默认 preload="metadata" 只载元数据（时长、尺寸），用户点播放才开始下视频；如果想秒开，得显式写 preload="auto"，但代价是首屏加载变慢、流量多耗。更稳妥的是用 preload="metadata" + poster 图 + 首帧预加载逻辑。
- 别用
src直接挂大 MP4：优先转成 H.264 编码的 MP4（用ffmpeg -c:v libx264），比原始 MOV/AVI 小 60% 以上 - 移动端慎用
autoplay：iOS Safari 和 Android Chrome 多数版本禁止自动播放有声视频，会静音且可能触发加载中断 - 视频尺寸远大于容器（比如 4K 视频塞进 320×180 的 ）会导致渲染压力，缩放到合适分辨率再压
视频资源放哪？CDN 不是可选项，是必选项
用户在北京，你服务器在新加坡，单次视频请求 RTT 就 200ms+，TCP 建连、SSL 握手、首包传输全叠加，再加缓冲策略，卡顿就是必然。必须把视频文件扔到 CDN，比如腾讯云 CDN、Cloudflare Stream 或 Bunny.net，它们能自动分片、缓存、按地域回源。
- CDN 回源地址填你 OSS 或源站域名，别填本地开发路径（如
file:///video/demo.mp4） - 开启
HTTP/2和Brotli压缩（CDN 控制台可配），对视频元数据（MP4 的 moov box）加速明显 - 检查响应头是否有
Accept-Ranges: bytes：没有它，就没法拖动进度条，用户一拖就重载，体验极差
真卡了怎么定位？别猜，用浏览器 DevTools 实锤
打开 Chrome，按
F12→Network标签 → 筛选Media，点开视频请求看「Timing」面板。重点盯三个时间：立即学习“前端免费学习笔记（深入）”；
-
Stalled高于 1s：DNS 或 TCP 排队，说明域名没走 CDN 或连接池打满 -
Content Download持续波动或断续：服务端吞吐不足或 CDN 节点缓存未命中 -
Waiting (TTFB)> 500ms：后端响应慢，或者视频文件没做分片（moov box 在文件末尾会导致 TTFB 极长）
最后提醒一句：H.265（HEVC）虽然省带宽，但 iOS 以外兼容性差，Android 大量中低端机不支持硬解，强行上反而更卡。老实用 H.264 + CDN + 合理 preload，比折腾新编码实在得多。
- CDN 回源地址填你 OSS 或源站域名，别填本地开发路径（如
