https://www.zakuronokijyosanin.com/js/hero.js

1// ヒーロー動画：再生終了・読み込み失敗時に静止画へフェードする
2(() => {
3  const video = document.querySelector('.hero-video')
4  const still = document.querySelector('.hero-still')
5  if (!video || !still) return
6
7  const showStill = () => {
8    still.classList.add('is-visible')
9    video.classList.add('is-hidden')
10  }
11
12  video.addEventListener('ended', showStill)
13  video.addEventListener('error', showStill)
14
15  const source = video.querySelector('source')
16  if (source) {
17    source.addEventListener('error', showStill)
18  }
19
20  // 動画が用意されていない環境では、読み込み失敗がスクリプト実行前に
21  // 確定していることがあるため、現在の状態も確認する
22  if (video.error || video.networkState === HTMLMediaElement.NETWORK_NO_SOURCE) {
23    showStill()
24  }
25
26  video.addEventListener(
27    'canplay',
28    () => {
29      try {
30        const playing = video.play()
31        if (playing && playing.catch) {
32          playing.catch(showStill)
33        }
34      } catch {
35        showStill()
36      }
37    },
38    { once: true }
39  )
40})()