Vimeo API：嵌入的Vimeo视频能否仅禁用部分键盘快捷键而非全部

1. 配置iframe嵌入参数关闭控制栏与默认快捷键 #

在Vimeo的嵌入链接中添加两个官方查询参数即可完成基础配置：

• controls=0：隐藏播放器底部所有控制栏
• keyboard=0：禁用播放器全部默认内置键盘快捷键

嵌入iframe示例代码：

<iframe 
  id="vimeo-player"
  src="https://player.vimeo.com/video/替换为你的视频ID?controls=0&keyboard=0" 
  width="1920" 
  height="1080" 
  frameborder="0" 
  allow="fullscreen"
></iframe>

注意：controls=0参数仅支持Vimeo Pro及更高等级的付费账户使用，免费账户无法生效。

2. 自定义监听F键实现全屏功能 #

在你的自有网站父页面添加如下JS代码，单独监听F键触发全屏操作即可：

document.addEventListener('keydown', function(e) {
  // 排除输入框聚焦场景，避免打字时误触发
  if (['INPUT', 'TEXTAREA'].includes(document.activeElement.tagName)) return;
  // 仅匹配无修饰键的F键按下事件
  if (e.key.toLowerCase() === 'f' && !e.ctrlKey && !e.altKey && !e.metaKey && !e.shiftKey) {
    const player = document.getElementById('vimeo-player');
    // 兼容多浏览器全屏API调用
    if (player.requestFullscreen) {
      player.requestFullscreen();
    } else if (player.webkitRequestFullscreen) {
      player.webkitRequestFullscreen();
    } else if (player.mozRequestFullScreen) {
      player.mozRequestFullScreen();
    } else if (player.msRequestFullscreen) {
      player.msRequestFullscreen();
    }
    e.preventDefault();
  }
});

常见问题排查 #

• 如果按下F键无法触发全屏，先检查iframe是否添加了allow="fullscreen"属性，缺少该属性会被浏览器拦截全屏权限
• 如果需要退出全屏也支持F键触发，不需要额外修改代码，浏览器原生全屏逻辑会自动响应同一按键的切换操作

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