Vimeo api 访问.mp4 私人视频

Question

我正在尝试检索 .mp4 文件以将其渲染为 HTML5 标记的源

<video src={videoUrl} />

我可以使用传递的 ID 查看视频的所有属性，但直接文件本身看不到任何内容，因此它可以在视频标签的 src 中播放。

如何访问文件并通过我的播放器播放？由于性能原因，我不想使用 oEmbed 或 Iframe。

export const getVimeoData = async (id: string) => {
  const vim_res = await fetch(`https://api.vimeo.com/videos/${id}`, {
    method: 'GET',
    headers: {
      'Content-Type': 'application/json',
      Authorization: `Bearer ${process.env.VIMEO_TOKEN}`,
      "grant_type": "client_credentials",
    },
  })
    .then((res) => res.json())
    .then((data) => {
      console.log('data :>> ', data);
    })
    .catch((err) => console.log(err));
  return vim_res;
};

Answer 1

export const getVimeoVideo = async (id: string) => {
  const videoData = await fetch(`https://api.vimeo.com/videos/${id}/files`, {
    method: 'GET',
    headers: {
      'Content-Type': 'application/json',
      Authorization: `Bearer ${process.env.VIMEO_TOKEN}`,
    },
  })
    .then((res) => res.json())
    .then((data) => {
      // Assuming the first file is the highest quality
      const videoFile = data.find((file) => file.quality === 'hd');
      if (videoFile) {
        return videoFile.link;
      }
      return null; // Handle case where no suitable file is found
    })
    .catch((err) => {
      console.log(err);
      return null;
    });
  return videoData;
};

此代码使用videos/{video_id}/files端点来获取与Vimeo视频关联的视频文件。然后，它会搜索具有所需质量（例如“hd”）的文件并返回其链接。

请记住，文件质量可能会有所不同，因此您可能需要根据您的要求调整选择所需质量的逻辑。

一旦您获得了视频文件的直接 URL (videoFile.link)，您就可以将其设置为 HTML 中标记的 src 属性：

const videoUrl = await getVimeoVideo('YOUR_VIDEO_ID');
if (videoUrl) {
  const videoElement = document.getElementById('yourVideoElementId');
  videoElement.src = videoUrl;
  // Optionally, trigger playback:
  videoElement.play();
} else {
  // Handle case where video URL is not available
}