响应式视频与浏览器原生硬件解码实践

在移动设备与现代高分辨率屏幕上展示自制视频片段时，选择合适的编码容器与 HTML 标签属性至关重要。

原生视频演示

下方是一个标准的 H.264（Baseline/High profile）+ AAC 音频流 MP4 视频样本。它在 iOS Safari、Android Chrome、macOS 及 Windows 均能自动激活硬件加速：

移动端与编码关键注意点

1. playsinline 属性不可忽略： 在 iPhone Safari 浏览器中，如果没有这个属性，点击播放往往会被操作系统强行拉起全屏独占播放器，打断页面阅读心流。加上 playsinline 可以实现内嵌原地流畅播放。
2. preload="metadata" 节约带宽： 对于单篇文章包含多个视频的情况，默认设置为 metadata。浏览器只会提前拉取视频时长、尺寸和首帧关键信息，不会提前把几十兆的视频流全量缓冲进来，极大地节省了访客流量与服务器带宽。
3. HTTP Range 支持： 拖动视频进度条同样依赖 Web 服务器的 Range 206 响应。经测试，无论是在 Chrome 还是 Safari 中拖到任意时间点，均可秒级响应解码。

如遇到网络限制，您亦可直接通过备用链接获取：下载原始视频