Skip to content

Getting Started 🚀

Jump to bottom
Or Fleisher edited this page Feb 12, 2019 · 4 revisions

To get started, pick the option the best suits your needs. If you are not sure which we highly recommend starting with Glitch.

Streaming Vimeo videos require video file access via the Vimeo API. Accessing video files is limited to Vimeo Pro and Business customers.

Using Glitch:

Getting started with Glitch is simple. First Remix the Glitch example:

Glitch remix badge

Next, generate your own Vimeo API token to access your videos. You can generate the token here, and then copy and paste it into the .env file from the Glitch project file browser.

Next, pick one of the examples you would like to use in examples/. If you are not sure, head over to examples/basic.html and change the video id in line 77 to your Vimeo video id. It should look something like:

    vimeoPlayer = new Vimeo.Player(vimeo_video_id, { autoplay: false });

Launch the live Glitch website and you should see the player with your video, hit play and it should start 👏

Having issues? ask on StackOverflow

Using the Github repository:

The Github repository uses yarn to manage dependencies, so the first thing you would want to do is go ahead and install it on your system.

Once you have yarn installed clone the repository to your computer:

git clone https://github.com/vimeo/vimeo-threejs-player.git

After cloning, navigate into the folder and run the following command from it:

yarn install

Next, generate your own Vimeo API token to access your videos. You can generate the token here. Once you have the token, create an empty .env file in the main folder and structure it to look like

VIMEO_TOKEN=your_vimeo_api_token

After that, you should be go to go to start the server and run the examples. To do that simply run:

yarn run start

And it should print the local server's address, open a browser and go to that address. Next, pick one of the examples you would like to use in examples/. If you are not sure, head over to examples/basic.html and change the video id in line 77 to your Vimeo video id. It should look something like:

    vimeoPlayer = new Vimeo.Player(vimeo_video_id, { autoplay: false });

Launch the example you picked in your browser and you should see the player with your video, hit play and it should start 👏

Having issues? ask on StackOverflow

Using the player in a pre-existing web-app:

In order to use the player in your pre-existing web application, you would need to add a route to request the Vimeo API and return the results to the front-end player. If you are using Node.js have a look at our sample server.

app.get('/vimeo/api', (request, response) => {
  let api = new Vimeo(null, null, process.env.VIMEO_TOKEN);

  api.request({
      method: 'GET',
      path: request.query.path,
      headers: { Accept: 'application/vnd.vimeo.*+json;version=3.4' },
    },
    function(error, body, status_code, headers) {
      if (error) {
        response.status(500).send(error);
        console.log('[Server] ' + error);
      } else {
        // Pass through the whole JSON response
        response.status(200).send(body);
      }
    }
  );
});

The player is requesting the route /vimeo/api with the addition of the resource you are trying to acquire. For example for a specific video the request path coming from the player would be

/vimeo/api/videos/video_id?fields=uri,play,width,height,live,description,title

If you are looking to use your own backend we highly recommend looking using one of the Vimeo API packages available for:

Once you have created the server route for the player to use, grab the latest release of the player code and follow the basic example on how to use within your WebGL application

Clone this wiki locally