如何用JavaScript查询Vimeo视频信息？IE11 CORS问题求解

嗨，我来帮你梳理并解决这个问题：

是不是Vimeo播放器的已知问题？ #

其实这不是Vimeo播放器或API的已知问题，问题根源在于Internet Explorer 11对CORS（跨域资源共享）的支持存在局限性。IE11使用的是较旧的XMLHttpRequest实现，对现代CORS规范的支持不完整——比如对预检请求（OPTIONS）的处理、某些自定义请求头的兼容性都有坑，而Vimeo API本身是完全符合CORS规范的，只是IE11的浏览器环境拖了后腿。

更好的JavaScript查询Vimeo视频信息的方法 #

优先推荐使用Vimeo官方提供的工具，它们已经内置了跨域兼容处理，完美适配IE11：

1. Vimeo官方JavaScript SDK #

这个SDK专门用于和Vimeo API交互，内部已经处理了跨域请求的兼容性问题，包括IE11的适配。使用前需要先在Vimeo开发者平台申请API令牌（免费即可获取基础权限）。

示例代码：

<!-- 引入Vimeo SDK脚本 -->
<script src="https://player.vimeo.com/api/player.js"></script>
<script>
  // 初始化SDK客户端，替换成你的API凭证
  const vimeoClient = new Vimeo.Vimeo({
    token: '你的访问令牌',
    key: '你的客户端ID',
    secret: '你的客户端密钥'
  });

  // 获取指定视频的详细信息，替换为目标视频ID
  vimeoClient.request({
    method: 'GET',
    path: '/videos/123456789'
  }).then(response => {
    console.log('视频详情:', response);
    // 在这里处理视频标题、时长、缩略图等数据
  }).catch(error => {
    console.error('请求失败:', error);
  });
</script>

2. Vimeo Player API（针对嵌入的播放器） #

如果你的场景是页面中已经嵌入了Vimeo播放器，想要获取该视频的基础信息，直接用Player API更简单——它通过postMessage和播放器通信，完全避开了CORS问题，不需要API令牌。

示例代码：

<!-- 嵌入Vimeo播放器 -->
<iframe id="my-vimeo-player" src="https://player.vimeo.com/video/123456789" 
        width="640" height="360" frameborder="0" allowfullscreen></iframe>

<!-- 引入Player API脚本 -->
<script src="https://player.vimeo.com/api/player.js"></script>
<script>
  // 初始化播放器实例
  const player = new Vimeo.Player('my-vimeo-player');

  // 获取视频标题
  player.getVideoTitle().then(title => {
    console.log('视频标题:', title);
  }).catch(err => {
    console.error('获取标题失败:', err);
  });

  // 获取视频时长
  player.getDuration().then(duration => {
    console.log('视频时长（秒）:', duration);
  });

  // 获取视频缩略图
  player.getVideoThumbnail().then(thumbnail => {
    console.log('缩略图地址:', thumbnail);
  });
</script>

为什么不推荐直接用jQuery $.ajax？ #

IE11的XMLHttpRequest对象不支持现代CORS的一些特性，比如无法正确处理Vimeo API返回的某些响应头，导致跨域请求被浏览器拦截。而官方SDK和Player API都通过封装适配了这些浏览器差异，比自己写原生AJAX更可靠。

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