网页视频中的 `playsinline` 属性是什么意思？

前几天我对此感到困惑，四处搜索答案，但找不到清晰的解释。答案实际上非常清楚，我对自己不知道这一点感到有点傻。

如果使用它，如下所示

<video src="..." controls playsinline></video>

移动浏览器将**在视频所在的位置播放视频**，而不是默认行为，即在播放时以全屏方式打开视频。

以下是不使用 playsinline 的效果

以下是使用 playsinline 的效果

（如果您像我一样，尝试从视频中的视频上的播放按钮播放该视频，只会意识到它不是真正的播放按钮。🤯）

（在变得更复杂的同时，我确保上面这些视频在本文中都启用了 playsinline 属性。）

请注意，即使在 playsinline 场景下，用户仍然可以将视频切换到全屏模式，因此我认为这可能是一个明智的默认选择。它并不是字面上的默认设置——您需要添加它，但您知道我的意思。

此属性经常出现在使视频充当 GIF 替代的属性组合中

<video autoplay loop muted playsinline src="..."></video>

如果您拥有这四个属性，则视频实际上会在移动浏览器上自动播放（并循环），就像 GIF 一样，但具有更好的性能。如果您不想要循环，可以跳过 loop，但如果您希望自动播放属性生效，则其他三个属性都是必需的。

我还了解到，在移动设备上（至少对于 iOS 而言）显示缩略图的（唯一？）方法是使用 poster 属性。即使您使用 preload，如果没有海报，您看到的也只是一片空白。

不使用 poster

使用 poster

<video
  src="movie.mov"
  poster="thumbnail.jpg" 
  controls
></video>mo

如果您不想麻烦地处理海报，可以考虑在 video 元素上添加 border 或其他样式，以某种方式视觉上隔离该区域。否则，浮动的播放按钮会有点尴尬。