媒体

¥Media

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

¥We provide convenient mechanics for autoplaying and lazy loading HTML media elements and iframes based on slide visibility and proximity. This works for <video>, <audio> and <iframe> elements.

自动播放

¥Autoplay

如果你希望幻灯片在显示时自动播放，请将 data-autoplay 添加到你的媒体元素中：

¥Add data-autoplay to your media element if you want it to automatically start playing when the slide is shown:

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

如果你想全局启用或禁用所有嵌入媒体的自动播放，可以使用 autoPlayMedia 配置选项。如果你将此选项设置为 true，则所有媒体都将自动播放，无论各个 data-autoplay 属性如何。如果你将其设置为 autoPlayMedia: false，则不会自动播放任何媒体。

¥If you want to enable or disable autoplay globally, for all embedded media, you can use the autoPlayMedia configuration option. If you set this option to true ALL media will autoplay regardless of individual data-autoplay attributes. If you set it to autoPlayMedia: false NO media will autoplay.

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

请注意，当你离开幻灯片时，嵌入的 HTML <video>/<audio> 和 YouTube/Vimeo iframe 会自动暂停。这可以通过使用 data-ignore 属性装饰元素来禁用。

¥Note that embedded HTML <video>/<audio> and YouTube/Vimeo iframes are automatically paused when you navigate away from a slide. This can be disabled by decorating your element with a data-ignore attribute.

灯箱

¥Lightbox

你可以通过添加 data‑preview‑image、data‑preview‑video 或 data‑preview‑link 属性，将任何元素转换为媒体灯箱。点击此行为时，媒体将以全屏覆盖的方式打开。在 Lightbox 文档 中了解更多信息。

¥You can turn any element into a media lightbox by adding the data‑preview‑image, data‑preview‑video or data‑preview‑link attribute. This will cause the media to open in a full-screen overlay when clicked. Learn more in the Lightbox docs.

<img src="reveal.png" data-preview-video="video.mp4">
<a href="https://hakim.se" data-preview-link>Open Link</a>

Open Link

延迟加载

¥Lazy Loading

在处理包含大量媒体或 iframe 内容的演示文稿时，延迟加载非常重要。延迟加载意味着 reveal.js 只会加载距离当前幻灯片最近的几张幻灯片的内容。预加载的幻灯片数量由 viewDistance 配置选项决定。

¥When working on presentations with a lot of media or iframe content it's important to load lazily. Lazy loading means that reveal.js will only load content for the few slides nearest to the current slide. The number of slides that are preloaded is determined by the viewDistance configuration option.

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

¥To enable lazy loading all you need to do is change your src attributes to data-src as shown below. This is supported for image, video, audio and iframe elements.

<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

¥Lazy Loading Iframes

请注意，延迟加载的 iframe 会忽略 viewDistance 配置，并且仅在其包含的幻灯片可见时才会加载。幻灯片隐藏后，iframe 也会立即卸载。

¥Note that lazy loaded iframes ignore the viewDistance configuration and will only load when their containing slide becomes visible. Iframes are also unloaded as soon as the slide is hidden.

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

¥When we lazy load a video or audio element, reveal.js won't start playing that content until the slide becomes visible. However there is no way to control this for an iframe since that could contain any kind of content. That means if we loaded an iframe before the slide is visible on screen it could begin playing media and sound in the background.

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

¥You can override this behavior with the data-preload attribute. The iframe below will be loaded according to the viewDistance.

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

你还可以使用 preloadIframes 配置选项全局更改默认值。如果设置为 true，则所有带有 data-src 属性的 iframe 在 viewDistance 内时都会预加载，无论各个 data-preload 属性如何。如果设置为 false，则所有 iframe 仅在可见时才会加载。

¥You can also change the default globally with the preloadIframes configuration option. If set to true ALL iframes with a data-src attribute will be preloaded when within the viewDistance regardless of individual data-preload attributes. If set to false, all iframes will only be loaded when they become visible.

iframe

使用 iframe 可以方便地包含来自外部来源的内容，例如 YouTube 视频或 Google Sheet。reveal.js 自动检测 YouTube 和 Vimeo 嵌入 URL，并在幻灯片可见时自动播放。

¥Using iframes is a convenient way to include content from external sources, like a YouTube video or Google Sheet. reveal.js automatically detects YouTube and Vimeo embed URLs and autoplays them when the slide becomes visible.

如果你在幻灯片中添加 <iframe>，它会受到幻灯片大小的限制。要突破此限制并添加全页 iframe，你可以使用 iframe 幻灯片背景。

¥If you add an <iframe> inside your slide it's constrained by the size of the slide. To break out of this constraint and add a full page iframe, you can use an iframe slide background.

iframe 发布消息

¥Iframe Post Message

reveal.js 自动将两个 发布消息 推送到嵌入的 iframe。当包含 iframe 的幻灯片可见时使用 slide:start，当 iframe 隐藏时使用 slide:stop。

¥reveal.js automatically pushes two post messages to embedded iframes. slide:start when the slide containing the iframe is made visible and slide:stop when it is hidden.

// JavaScript inside of an iframe embedded within reveal.js
window.addEventListener('message', (event) => {
  if (event.data === 'slide:start') {
    // The slide containing this iframe is visible
  } else if (event.data === 'slide:stop') {
    // The slide containing this iframe is not visible
  }
});