把每一路 4K 都在源站转出来，带宽和电费会随月活线性上涨。设备端超分让大多数用户看“够清晰”的画面，源站只保留一份高效编码。
服务器成本方面的挑战#
源站转码常占媒体预算的最大可变部分。每一路新清晰度都要占存储、CPU 和出口带宽。把“看起来更清晰”的工作移到用户设备后，源站只服务一份压缩流。
客户端推理是少数能把可变成本压到接近零的路径：模型在 GPU 上跑，画面不回传到超分 API。
使用 WebCodecs 和 WebGPU 进行客户端处理#
视频元素和字幕必须写在 HTML 里。WebGPU 不可用时播放原始流；可用时再把解码帧交给计算着色器。搜索引擎和 AI 抓取器看到的是带文字说明的页面，而不是空白 canvas。
流水线按解复用、解码、处理、编码、封装分段。每一段用 Streams 背压相连，编码变慢时解码自动减速，避免主线程被帧队列淹没。
请把 GPU 提交放进独立循环。用户点击播放或暂停必须在 200ms 内画出下一帧。第三方分析脚本延后到首次交互之后。
// Decode one frame, upscale on GPU, encode — never on the main thread.
async function enhance(frame, gpu) {
const bitmap = await createImageBitmap(frame);
const output = await gpu.render(bitmap);
return new VideoFrame(output, { timestamp: frame.timestamp });
}结果#
设备端处理后，转码集群不再随月活扩容。同一套 HTML 仍然能被抓取：指标、步骤和代码都在首份响应里，而不是等 JS 执行完才出现。
建议和资源#
先确认页面在关闭脚本时仍能阅读。再检测 WebGPU，失败就播原始流。功能检测失败必须有可播放回退；Googlebot 不保证有 WebGPU，正文不要只画在 canvas 里。
- HTML 视频是核心功能，GPU 是增强。
- 功能检测失败必须有可播放回退。
- 把帧循环移出主线程，才能保住 INP。