0

I'm currently working on a website, and I would like to add automatically the most recent video uploaded on my vimeo account. I found out that I have to use in a first place, an API, but I don't know any API which can do that. So I came up with this idea :

1 - First, connect to my vimeo account with php or javascript etc... from my website in the case to end up to the management page.

2 - Get the HTML with the DOM, I found the ID of the video in the url of the videos.

3 - Create a function that replace automatically the ID of the URL in the from the video that vimeo gives you on my website.

The code that vimeo gives you :

<iframe src="https://player.vimeo.com/video/563338183?badge=0&amp;autopause=0&amp;player_id=0&amp;app_id=58479" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen style="position:absolute;top:0;left:0;width:40%;height:40%;" title="HIEBEL_GRAND VITRAIL_0621_57400"></iframe><script src="https://player.vimeo.com/api/player.js"></script>

The URL of a video from vimeo :

https://vimeo.com/manage/videos/123456789/1234a56789

To get there, I have to be connected.

The connection pop-up : image of the home page of vimeo with the connection pop up and the HTML

I found some Jquery function on the web, but I think that it's not for what I'm looking for :

jQuery(function($){
    $('#result').load('https://vimeo.com/fr/');
});

If you guys have a solution, I'll be very grateful

9
  • Surely you can sort the data returned either asc/desc and select the last item?? Commented Jul 27, 2021 at 14:04
  • oh, ok, I didn't know about that. Thanks, that will help a lot! Commented Jul 27, 2021 at 14:45
  • TBH I have never worked with the Vimeo API but that is just what I saw looking at their documentation. Commented Jul 27, 2021 at 14:50
  • I've found this post stackoverflow.com/questions/46582015/… but it seems really complicated just for that. I don't understand why they didn't think about a simple thing like that... Commented Jul 27, 2021 at 15:12
  • Alas I cannot run any test scripts as I have not uploaded any videos to Vimeo. I did run the query I mentioned with a few parameters set and the response suggests the data of interest will be within the json.data array. The question you linked to made a point regarding hiding your authorisation accesstoken - though for you this might not be applicable as all you need to run the query is your userId number in the url. Commented Jul 27, 2021 at 16:05

1 Answer 1

1

Ok guys, after trying a lot and looking for a working code, I finally got it!

That's the key :

import React from "react";
import ReactDOM from "react-dom";
import axios from "axios";

const CLIENT_IDENTIFIER = "***INSERT CLIENT ID***";
const CLIENT_SECRET =
  "***INSERT TOKEN***";

class App extends React.Component {
  state = {
    vimeo: []
  };

  async getVideosForChannel(access_token) {
    const { data } = await axios.get(
      "https://api.vimeo.com/channels/***CHANNEL NAME***/videos?sort=date&direction=desc",
      {
        headers: {
          Authorization: `Bearer ${access_token}`
        }
      }
    );

    this.setState({ vimeo: data.data });
  }

  async componentDidMount() {
    if (!CLIENT_IDENTIFIER || !CLIENT_SECRET) {
      return alert("Please provide a CLIENT_IDENTIFIER and CLIENT_SECRET");
    }

    try {
      const { data } = await axios.post(
        "https://api.vimeo.com/oauth/authorize/client",
        { grant_type: "client_credentials" },
        {
          auth: {
            username: CLIENT_IDENTIFIER,
            password: CLIENT_SECRET
          }
        }
      );

      this.getVideosForChannel(data.access_token);
    } catch (error) {
      if (error.response.status === 429) {
        alert(
          "The Vimeo api has received too many requests, please try again in an hour or so"
        );
      }
    }
  }

  render() {
    return (
      <div className="App">
        <ul>
          {this.state.vimeo.map(({ resource_key, link, name }) => (
            <li key={resource_key}>
              <a id="lien" href={link}>
                {name}
              </a>
              <p>{link}</p>
            </li>
          ))}
        </ul>
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

You gotta make sure that react is install to make it work.

( thanks to this dude https://codesandbox.io/s/pwro9p7w8j?file=/src/index.js )

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.