AVIF画像の読み込みエラーを検知し、mp4動画に切り替える

<iframe src="//player.vimeo.com/video/884268758?background=1&keyboard=0" width="500" height="280.55" frameborder="0" id="mp4Video" alt="舷窓からの風景">
</iframe>

<img src="//dl.dropboxusercontent.com/scl/fi/zbc28h3d9hfpdly29lc2m/kirakira.avif?rlkey=turrh6q5ew62schj7l3bj7m9g" id="avifImage" alt="エッフェル塔の夜景を見るカップル" width="500" height="auto" loading="lazy" itemprop="image"/>

<img src="//cdn-ak.f.st-hatena.com/images/fotolife/f/fobitows/20231022/20231022215844.jpg" id="avifImage" alt="エッフェル塔の夜景を見るカップル" width="500" height="auto" loading="lazy" itemprop="image"/>

<video autoplay muted loop width="500" height="280.55" poster="//cdn-ak.f.st-hatena.com/images/fotolife/f/fobitows/20231022/20231022215844.jpg" src="//dl.dropboxusercontent.com/scl/fi/vgk41oztvc3bo5ssod5un/dc6cbf20-e12e-40dc-b0e7-9cd33811a15d.mp4?rlkey=itvhph9tzmrx9jeabep8f2p78" id="mp4Video" alt="舷窓からの風景">
</video>

const avifImage = document.getElementById("avifImage");
const mp4Video = document.getElementById("mp4Video");

// AVIF画像の読み込みエラーを検知し、mp4動画に切り替える
avifImage.addEventListener("error", function() {
  avifImage.style.display = "none";  // AVIF画像を非表示に
  mp4Video.style.display = "block";  // mp4動画を表示する
});