Vimeo api access .mp4 private videos

Question

I'm trying to retrieve the .mp4 file to render inside as a source to the HTML5 tag <video src={videoUrl} />

I can see all the properties of the video with the passed ID but nothing to the direct file itself so it can play within the src of the video tag.

How can I access the file to play through my player? I don't want to use the oEmbed or Iframe due to performance reasons.

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;
};

This code uses the videos/{video_id}/files endpoint to fetch the video files associated with the Vimeo video. It then searches for the file with the desired quality (e.g., 'hd') and returns its link.

Remember, the file quality might vary, so you might need to adjust the logic for selecting the desired quality based on your requirements.

Once you have the direct URL to the video file (videoFile.link), you can set it as the src attribute for the tag in your HTML:

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
}