媒体

提供便捷机制，可根据幻灯片可见性和接近度来自动播放和惰性加载 HTML 媒体元素和 iframe。适用于 <video>、<audio> 和 <iframe> 元素。

自动播放

如果要在显示幻灯片时自动播放媒体元素，请将 data-autoplay 添加到媒体元素

<video
  data-autoplay
  src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"
></video>

如果要为所有嵌入式媒体全局启用或禁用自动播放，可以使用 autoPlayMedia 配置选项。如果将此选项设为 true，所有媒体都将自动播放，而不管单独的 data-autoplay 属性。如果设为 autoPlayMedia: false，则不会自动播放任何媒体。

Reveal.initialize({
  autoPlayMedia: true,
});

请注意，离开幻灯片时，嵌入式 HTML <video>/<audio> 和 YouTube/Vimeo iframe 会自动暂停。可以将元素装饰为 data-ignore 属性来禁用此功能。

延迟加载

处理包含大量媒体或 iframe 内容的演示文稿时，重要的是要延迟加载。延迟加载意味着 reveal.js 将仅为最邻近当前幻灯片的幻灯片加载内容。要预加载的幻灯片数量由 `viewDistance` 配置选项确定。

要启用延迟加载，你需要做的就是将 `src` 属性更改为 `data-src`，如下所示。这受图像、视频、音频和 iframe 元素支持。

<section>
  <img data-src="image.png">
  <iframe data-src="https://hakim.se"></iframe>
  <video>
    <source data-src="video.webm" type="video/webm" />
    <source data-src="video.mp4" type="video/mp4" />
  </video>
</section>

延迟加载 iframe

请注意，延迟加载的 iframe 会忽略 `viewDistance` 配置，并且仅在其所在的幻灯片变得可见时才会加载。幻灯片隐藏后，iframe 也将卸载。

当我们延迟加载视频或音频元素时，reveal.js 将不会在幻灯片可见之前开始播放该内容。但是，没有办法控制 iframe，因为它可以包含任何类型的内容。这意味着如果我们在幻灯片在屏幕上可见之前加载 iframe，它可能开始在后台播放媒体和声音。

你可以使用 `data-preload` 属性覆盖此行为。下面的 iframe 将根据 `viewDistance` 加载。

<section>
  <iframe data-src="https://hakim.se" data-preload></iframe>
</section>

你也可以使用 `preloadIframes` 配置选项全局更改此默认值。如果设置为 `true`，则在 `viewDistance` 内，具有 `data-src` 属性的所有 iframe 都将被预加载，而不管各个 `data-preload` 属性如何设置。如果设置为 `false`，则所有 iframe 仅在可见时才会加载。

iframe

使用 iframe 是从外部来源（如 YouTube 视频或 Google 表格）包含内容的便捷方式。reveal.js 会自动检测 YouTube 和 Vimeo 嵌入 URL，并在幻灯片可见时自动播放它们。

如果你在幻灯片中添加了 `