标准答案

  1. controls 显示浏览器原生控制条,autoplay 尝试自动播放,muted 静音,loop 循环播放。
  2. preload 控制浏览器是否预加载媒体,常见值有 none、metadata、auto。
  3. poster 给 video 设置播放前封面,playsinline 常用于移动端内联播放。
  4. 移动端和现代浏览器通常禁止有声自动播放,静音视频更容易被允许。
  5. 真实项目要提供手动播放入口,并处理自动播放失败的 Promise。

题目解析

这题重点是浏览器策略,不是背属性列表。自动播放受用户手势、省流量、系统设置和浏览器策略影响。

preload 也不是强制命令,浏览器可以根据网络和设备策略自行决定。

代码示例

移动端背景视频通常会静音并声明 playsinline。

HTML
<video
  src="/intro.mp4"
  poster="/intro-poster.jpg"
  autoplay
  muted
  loop
  playsinline
></video>

常见误区

  • 认为写了 autoplay 就一定会播放。
  • 忘记给视频提供 poster,首屏出现黑块或空白。
  • 为了首屏效果 preload 大视频,拖慢关键内容加载。

作者信息