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视频卡顿，先看是不是加载方式错了
卡顿不等于网速差，大概率是 <video></video> 标签没配对。默认 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 的
<div>）会导致渲染压力，缩放到合适分辨率再压 <h3>视频资源放哪？CDN 不是可选项，是必选项 </h3> <p>用户在北京，你服务器在新加坡，单次视频请求 RTT 就 200ms+，TCP 建连、SSL 握手、首包传输全叠加，再加缓冲策略，卡顿就是必然。必须把视频文件扔到 CDN，比如腾讯云 CDN、Cloudflare Stream 或 Bunny.net，它们能自动分片、缓存、按地域回源。</p><div class="aritcle_card flexRow"> <div class="artcardd flexRow"> <a class="aritcle_card_img" href="/xiazai/skill9515" title="github项目持续追踪"><img src="https://img.php.cn/upload/skill/000/000/081/179265434711971.jpg" alt="github项目持续追踪" ></a> <div class="aritcle_card_info flexColumn"> <a href="/xiazai/skill9515" title="github项目持续追踪">github项目持续追踪</a> <p>GitHub 项目更新追踪工具 - 自动检查多个 GitHub 项目的 Releases 和 CHANGELOG，生成更新摘要与影响分析报告。支持自动化定时任务。 如何使用 最简单的方式：直接用自然语言告诉我 你可以说 我会做 「检查 GitHub 更新」 检查最新版本 「添加 vscode」 追踪新项目 「停止追踪 xxx」 移除项目 「暂停更新检查」 暂停自动化 「给我看 openclaw 报告」 展示报告 触发词：「追踪项目更新」「检查 GitHub 更新」「项目更新报告」「设置更新提醒」</p> </div> <a href="/xiazai/skill9515" title="github项目持续追踪" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <ul> <li>CDN 回源地址填你 OSS 或源站域名，别填本地开发路径（如 <code>file:///video/demo.mp4） - 开启
HTTP/2和Brotli压缩（CDN 控制台可配），对视频元数据（MP4 的 moov box）加速明显 - 检查响应头是否有
Accept-Ranges: bytes：没有它，<video></video>就没法拖动进度条，用户一拖就重载，体验极差
真卡了怎么定位？别猜，用浏览器 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，比折腾新编码实在得多。
