如何检测浏览器不兼容的html5背景视频并显示图片？

<div id="video-container">
  <video id="background-video" autoplay loop muted>
    <source src="video.mp4" type="video/mp4">
    <source src="video.webm" type="video/webm">
    <img src="fallback-image.jpg" alt="Fallback Image">
  </video>
</div>

<script>
  var video = document.getElementById('background-video');
  
  if (video.canPlayType) {
    // 检测浏览器是否支持HTML5视频格式
    var canPlayMp4 = video.canPlayType('video/mp4');
    var canPlayWebm = video.canPlayType('video/webm');
    
    if (canPlayMp4 === '' && canPlayWebm === '') {
      // 浏览器不支持HTML5视频，显示替代图片
      var fallbackImage = document.createElement('img');
      fallbackImage.src = 'fallback-image.jpg';
      fallbackImage.alt = 'Fallback Image';
      video.parentNode.insertBefore(fallbackImage, video);
      video.style.display = 'none';
    }
  }
</script>