如何识别YouTube/Vimeo播放器403禁止并替换为图片？

当然可以，针对你嵌入的Vimeo和YouTube视频，分别可以通过以下方案检测403拦截状态，进而切换显示 fallback 图片：

Vimeo 视频检测方案 #

你已经引入了@vimeo/player依赖，直接利用它的错误监听机制就能捕获加载失败（包括403）的情况：

方案1：通过Player实例监听错误事件 #

import Player from '@vimeo/player';

// 初始化Vimeo播放器
const vimeoPlayer = new Player('unique-video-id');

// 监听错误事件
vimeoPlayer.on('error', (error) => {
  // Vimeo错误码中，2200/2202对应权限相关错误，也可通过错误信息判断403
  if ([2200, 2202].includes(error.code) || error.message.includes('403')) {
    // 隐藏视频容器，显示fallback图片
    document.getElementById('unique-video-id').style.display = 'none';
    document.getElementById('vimeo-fallback-img').style.display = 'block';
  }
});

方案2：预请求验证视频可访问性（需注意跨域） #

提前发起HEAD请求测试视频资源状态，若返回403则直接显示图片：

const videoId = '你的Vimeo视频ID';
fetch(`https://player.vimeo.com/video/${videoId}`, { method: 'HEAD' })
  .then(res => {
    if (res.status === 403) {
      // 直接显示图片，不初始化播放器
      document.getElementById('unique-video-id').style.display = 'none';
      document.getElementById('vimeo-fallback-img').style.display = 'block';
    } else {
      // 正常初始化播放器
      new Player('unique-video-id');
    }
  })
  .catch(() => {
    // 网络错误时也触发fallback
    document.getElementById('unique-video-id').style.display = 'none';
    document.getElementById('vimeo-fallback-img').style.display = 'block';
  });

注：直接前端请求可能遇到CORS限制，建议通过后端代理请求验证状态。

YouTube 视频检测方案 #

YouTube iframe无法直接捕获HTTP状态码，但可以通过官方API或iframe加载事件间接判断：

方案1：使用YouTube IFrame Player API监听错误 #

// 加载YouTube官方API脚本
const tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
document.querySelector('script').parentNode.insertBefore(tag, document.querySelector('script'));

let youtubePlayer;
// API加载完成后初始化播放器
function onYouTubeIframeAPIReady() {
  youtubePlayer = new YT.Player('ytplayer', {
    videoId: '<YOUTUBE_VIDEO_ID>',
    playerVars: {
      playlist: '<YOUTUBE_VIDEO_ID>',
      controls: 0,
      mute: 1,
      autoplay: 1,
      loop: 1,
      modestbranding: 1,
      showinfo: 0,
      rel: 0
    },
    events: {
      'onError': handleYtError
    }
  });
}

// 处理播放器错误
function handleYtError(event) {
  // YouTube错误码101/150对应无法播放（包含403权限拦截场景）
  if ([101, 150].includes(event.data)) {
    document.getElementById('ytplayer').style.display = 'none';
    document.getElementById('youtube-fallback-img').style.display = 'block';
  }
}

方案2：监听iframe加载状态（无需API） #

通过iframe的错误事件和超时判断间接检测加载失败：

const ytIframe = document.querySelector('.ytplayer');
let isYtLoaded = false;

// 监听iframe错误事件
ytIframe.addEventListener('error', () => {
  document.getElementById('ytplayer').style.display = 'none';
  document.getElementById('youtube-fallback-img').style.display = 'block';
});

// 监听iframe加载完成事件
ytIframe.addEventListener('load', () => {
  isYtLoaded = true;
});

// 超时判断：5秒未加载完成则视为失败
setTimeout(() => {
  if (!isYtLoaded) {
    document.getElementById('ytplayer').style.display = 'none';
    document.getElementById('youtube-fallback-img').style.display = 'block';
  }
}, 5000);

通用准备工作 #

提前在页面中添加fallback图片容器，默认隐藏：

<!-- Vimeo fallback -->
<div id="vimeo-fallback-img" style="display:none;" class="embed-responsive embed-responsive-16by9">
  <img src="你的图片地址" class="embed-responsive-item" alt="视频无法加载">
</div>

<!-- YouTube fallback -->
<div id="youtube-fallback-img" style="display:none;" class="embed-responsive embed-responsive-16by9">
  <img src="你的图片地址" class="embed-responsive-item" alt="视频无法加载">
</div>

内容的提问来源于stack exchange，提问作者Tobias