スクロールで動画を自動再生
動画が画面内に入ったら自動再生し、外れたら一時停止する仕組みです。 IntersectionObserver で動画要素を監視し、表示割合が threshold:.5 を超えたら play() 、下回ったら pause() を呼びます。
解説
動画が画面内に入ったら自動再生し、外れたら一時停止する仕組みです。IntersectionObserver で動画要素を監視し、表示割合が threshold:.5 を超えたら play()、下回ったら pause() を呼びます。動画には muted と playsinline を付けてあり、これがないとモバイルの多くのブラウザは自動再生をブロックします。poster で読み込み前の静止画を出し、loop で繰り返すため、スクロールで通り過ぎるたびに同じ映像が再生されます。play() は catch で握っており、自動再生が拒否されてもエラーで止まりません。
使う場面とカスタマイズ
ランディングページの製品デモ、背景の雰囲気映像、事例紹介の短いクリップなどに向きます。見えていない動画を止めるので通信量とバッテリーの節約になり、複数の動画を並べても無駄に流れ続けません。再生を始める深さは threshold の値で調整でき、値を上げるとより画面中央に来てから再生されます。注意点として、自動再生は音声付きでは基本的に不可なので muted は維持し、動きに敏感な利用者へは prefers-reduced-motion で自動再生を控える分岐を足すと配慮になります。
使用例・適したシーン
- LP の演出強化
- 記事の読了率向上
- ストーリーテリング表現
よくある質問
音声付きで自動再生できますか。
基本的にできません。多くのブラウザは音の出る動画の自動再生をブロックするため muted が必要です。音を出したい場合はユーザーがクリックして再生する形にしてください。
再生が始まるタイミングを変えたい。
IntersectionObserver の threshold を調整します。値を大きくするほど動画が画面の中央寄りに来てから再生され、小さくすると端に少し入った段階で再生が始まります。