メディア

reveal.js は、スライドの表示状態と近接性に基づいて、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の場合はこれを制御する方法がありません。つまり、スライドが画面に表示される前にiframeを読み込んだ場合、バックグラウンドでメディアとサウンドの再生が開始される可能性があります。

data-preload属性を使用して、この動作を上書きできます。以下のiframeは、viewDistanceに従って読み込まれます。

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

preloadIframes設定オプションを使用して、デフォルトをグローバルに変更することもできます。trueに設定すると、data-src属性を持つすべてのiframeは、個々のdata-preload属性に関係なく、viewDistance内にある場合にプリロードされます。falseに設定すると、すべてのiframeは表示可能になった場合にのみ読み込まれます。

iframe

iframeを使用すると、YouTubeビデオやGoogleシートなど、外部ソースからのコンテンツを簡単に含めることができます。reveal.jsは、YouTubeとVimeoの埋め込みURLを自動的に検出し、スライドが表示可能になると自動再生します。

スライド内に<iframe>を追加すると、スライドのサイズによって制約されます。この制約を解除してフルページのiframeを追加するには、iframeスライド背景を使用できます。

iframe Post Message

reveal.jsは、埋め込みiframeに2つのpostMessageを自動的に送信します。iframeを含むスライドが表示可能になるとslide:start、非表示になるとslide:stop。

// 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
  }
});