下载vimeo视频_使用Vimeo的API和Slim构建基本的视频搜索应用

怼烎@ 2022-12-03 09:28 62阅读 0赞

下载vimeo视频

In this tutorial, you’ll get to know the basics of the Vimeo API. With it, you can fetch information on a specific user or get information on the videos uploaded by the user. If the video is private, you can only get it from the API if the user has given permission to your app.

在本教程中，您将了解Vimeo API的基础知识。 使用它，您可以获取有关特定用户的信息或获取有关该用户上传的视频的信息。 如果视频是私人视频，则只有在用户授予了您的应用权限后，您才能从API中获取视频。

![Vimeo Logo][]

## 创建一个新的应用程序 **(**Creating a New App**)** ##

The first thing you’re going to need is a Vimeo account. Once you have one, go to [developer.vimeo.com][] and click on [My Apps][]. This will list out all the apps that you’ve created. Since it’s your first time, it should be empty. Click the *create a new app* button to start creating a new app. Enter the name, description, URL and callback URL of the app. For the URL and callback URL you can enter a URL on your development machine (like `http://homestead.app`).

您首先需要的是Vimeo帐户。 拥有一个后，请访问[developer.vimeo.com][]并单击[我的应用程序][My Apps] 。 这将列出您创建的所有应用。 由于这是您的第一次，因此应为空。 单击*创建新应用程序*按钮以开始创建新应用程序。 输入应用程序的名称，描述，URL和回调URL。 对于URL和回调URL，您可以在开发计算机上输入URL(例如`http://homestead.app` )。

![vimeo new app][]

Click on the *create app* button once you’re done adding the details. You will be redirected to the app page where you can click the ‘authentication’ tab to reveal the tokens which you can use to interact with the API. We’ll need those later.

添加完详细信息后，单击“ *创建应用程序”*按钮。 您将被重定向到应用程序页面，您可以在其中单击“身份验证”选项卡以显示可用于与API交互的令牌。 我们稍后将需要它们。

## API游乐场 **(**API Playground**)** ##

Before you move on to coding a demo app, take a look at the [API Playground][]. This is a tool provided by Vimeo so developers can play around with the API without having to code anything. It allows you to make calls to specific API endpoints, set custom values for the parameters that can be passed through those endpoints and see the actual result which is a JSON string.

在继续进行演示应用程序编码之前，请看一下[API Playground][] 。 这是Vimeo提供的工具，因此开发人员无需使用任何代码即可使用API。 它允许您调用特定的API端点，为可通过这些端点传递的参数设置自定义值，并查看实际结果(即JSON字符串)。

Check the *‘Authenticate this call as \{your user name\}’* checkbox so that all API calls are performed on behalf of your Vimeo account. If you do not check this box, the API calls will be performed as an unauthenticated request. This means that it won’t be using your app credentials, nor a specific user to perform requests to the API. In effect, it’s then limited to only accessing publicly available information.

选中*“使用\{您的用户名\}验证此调用”*复选框，以便所有API调用均代表您的Vimeo帐户执行。 如果您未选中此框，则API调用将作为未经身份验证的请求执行。 这意味着它将不会使用您的应用程序凭据，也不会使用特定用户来执行对API的请求。 实际上，它仅限于访问公开可用的信息。

Going back to the API Playground, select the application which you’ve created earlier. You can click the *make call* button to perform the request. The default URL used in the playground is `https://api.vimeo.com/` which just lists out all the endpoints which are available from the API. To change this, you can click on the *(Empty…)* link on the left side of the screen. From there, you can select the endpoint to which you want to send a request. You can try the *users* endpoint for starters. Once selected, it allows you to input the ID of a specific user and search for users by specifying a set of parameters.

回到API Playground，选择您之前创建的应用程序。 您可以单击*拨打*按钮执行请求。 运动场中使用的默认URL为`https://api.vimeo.com/` ，该URL仅列出了API可用的所有端点。 要更改此设置，您可以单击屏幕左侧的*(空…)*链接。 从那里，您可以选择要将请求发送到的端点。 您可以尝试入门的*用户*端点。 选择后，它允许您输入特定用户的ID并通过指定一组参数来搜索用户。

![api playground users][]

In the example above, you’re searching for a user named ‘ash ketchum’. You do this by specifying a value for the `query` parameter. You can also see which parameters are required and which ones are optional. The parameters that you can specify are pretty self-explanatory. Go ahead and play with different values to familiarize yourself with the API calls that you can make.

在上面的示例中，您正在搜索名为“ ash ketchum”的用户。 您可以通过为`query`参数指定一个值来实现。 您还可以查看哪些参数是必需的，哪些是可选的。 您可以指定的参数很容易解释。 继续尝试不同的值，以熟悉您可以进行的API调用。

If you examine the results, it returns 25 rows per page by default. It also shows the total number of rows that the query returns. In this case, it’s 16. This is evident on the paging data as well: `next` has a value `null` so this means there’s no next page.

如果检查结果，则默认情况下每页返回25行。 它还显示查询返回的总行数。 在这种情况下，它是16。这在分页数据上也很明显： `next`的值为`null` ，这意味着没有下一页。

![vimeo user][]

From the response above, all the user data is inside the `data` array. Each user is an object with the same set of properties in them. If you want to get more detailed information about a specific user, you can extract its ID from the value of the `uri`. In this case it’s `/users/3151551` so the ID is `3151551`. You can copy that and use it as a value for the `{user_id}` under the users endpoint to query that specific user.

根据上面的响应，所有用户数据都在`data`数组内部。 每个用户都是一个具有相同属性集的对象。 如果要获取有关特定用户的更多详细信息，可以从`uri`的值中提取其ID。 在这种情况下，它是`/users/3151551`所以ID为`3151551` 。 您可以将其复制并用作用户端点下`{user_id}`的值，以查询该特定用户。

"data": [
            {
                "uri": "/users/3151551",
                "name": "ash ketchum",
                "link": "https://vimeo.com/user3151551",
    ...

Do note that some endpoints require an authenticated user to perform the request. This means that you have to check the *Authenticate this call as \{your user name\}* checkbox to perform the request. An example of such an endpoint is the `me` endpoint. This specific endpoint allows your app to query data regarding the currently authenticated user.

请注意，某些端点需要经过身份验证的用户才能执行请求。 这意味着您必须选中“使用*\{您的用户名\}验证此呼叫”*复选框以执行请求。 此类端点的一个示例是`me`端点。 这个特定的端点使您的应用可以查询有关当前经过身份验证的用户的数据。

## 创建演示 **(**Creating the Demo**)** ##

### 先决条件 **(**Prerequisites**)** ###

From this point forward, we’ll assume you’re using our [Homestead Improved][] Vagrant box to follow along. It’s a virtual development environment tuned for common PHP applications, so that every reader has the same starting point.

从现在开始，我们将假设您正在使用“ [宅基地改进的][Homestead Improved]流浪者”框。 它是为常见PHP应用程序调整的虚拟开发环境，因此每个读者都具有相同的起点。

For the demo, you will be using the [Slim framework][], [Twig templating engine][] and the [Vimeo PHP library][]. Let’s install them:

对于演示，您将使用[Slim框架][Slim framework] ， [Twig模板引擎][Twig templating engine]和[Vimeo PHP库][Vimeo PHP library] 。 让我们安装它们：

composer require slim/slim twig/twig slim/views vimeo/vimeo-api

### 自举 **(**Bootstrapping**)** ###

In your working directory, create an `index.php` file, start the session, and include Composer’s autoloader:

在您的工作目录中，创建一个`index.php`文件，启动会话，并包含Composer的自动加载器：

<?php
    session_start();
    require_once 'vendor/autoload.php';

Define a constant for the client ID, client secret and redirect URI used by your app. Make sure the redirect URI which you have added in the details of your app matches the URL that you use in here.

为应用程序使用的客户端ID，客户端密钥和重定向URI定义一个常量。 确保您在应用程序详细信息中添加的重定向URI与您在此处使用的URL匹配。

define('CLIENT_ID', 'your vimeo client id');
    define('CLIENT_SECRET', 'your vimeo client secret');
    define('REDIRECT_URI', 'your vimeo redirect or callback url');

Create a new instance of the Slim app and pass in Twig for the `view` option. This allows you to use Twig for handling views. Also, set the parser options for the view.

创建Slim应用程序的新实例，并在Twig中传递`view`选项。 这使您可以使用Twig处理视图。 另外，设置视图的解析器选项。

$app = new \Slim\Slim(array(
        'view' => new \Slim\Views\Twig() //use twig for handling views
    ));
    
    $view = $app->view();
    $view->parserOptions = array(
        'debug' => true, //enable error reporting in the view
        'cache' => dirname(__FILE__) . '/cache' //set directory for caching views
    );

Add the following to use the Vimeo library.

添加以下内容以使用Vimeo库。

$vimeo = new \Vimeo\Vimeo(CLIENT_ID, CLIENT_SECRET);

### 获取未认证的令牌 **(**Getting Unauthenticated Tokens**)** ###

You can perform requests to the Vimeo API without having the user logged in and give permission to your app. You can do that by acquiring unauthenticated tokens using the `clientCredentials` method in the Vimeo library. This returns an access token which can be used for querying public data. The number of API endpoints which you can use with an unauthenticated token is fairly limited so you won’t be using it in this tutorial.

您无需用户登录即可授予对Vimeo API的请求，并为您的应用授予权限。 您可以通过使用Vimeo库中的`clientCredentials`方法获取未经`clientCredentials`验证的令牌来实现。 这将返回一个访问令牌，该令牌可用于查询公共数据。 可以与未经身份验证的令牌一起使用的API端点的数量非常有限，因此在本教程中不会使用它。

$app->get('/token', function() use ($app, $vimeo) {
    
        $token = $vimeo->clientCredentials();
    
        echo $token['body']['access_token'];
    
    });

### 在登录 **(**Logging In**)** ###

Here’s the login route. This allows the user to give permission to your app so that the app can access the user’s private data and perform requests on behalf of the user.

这是登录路径。 这允许用户向您的应用授予权限，以便该应用可以访问用户的私人数据并代表该用户执行请求。

$app->get('/login', function () use ($app, $vimeo) {
    
        if($app->request->get('code') && $app->request->get('state') == $_SESSION['state']){
    
            $code = $app->request->get('code');
    
            $token = $vimeo->accessToken($code, REDIRECT_URI);
    
            $access_token = $token['body']['access_token'];
            $vimeo->setToken($access_token);
    
            $_SESSION['user.access_token'] = $access_token;
    
            $page_data = array(
                'user' => $token['body']['user']
            );
    
        }else{
    
            $scopes = array('public', 'private');
            $state = substr(str_shuffle(md5(time())), 0, 10);
            $_SESSION['state'] = $state;
    
            $url = $vimeo->buildAuthorizationEndpoint(REDIRECT_URI, $scopes, $state);
    
            $page_data = array(
                'url' => $url
            );
        }
    
        $app->render('login.php', $page_data);
    
    });

Breaking it down, you first check if the code and the state are passed along as query parameters. For added security, you also check if the state is the same as the state that was previously saved in the session.

对其进行分解，您首先要检查代码和状态是否作为查询参数传递。 为了提高安全性，您还可以检查状态是否与之前保存在会话中的状态相同。

if($app->request->get('code') && $app->request->get('state') == $_SESSION['state']){
        ...   
    }

If the condition above returns `true` for both, proceed with exchanging the code and the redirect URI for the access token. You can do that by calling the `accessToken` method in the Vimeo library. Next, extract the access token from the result that was returned and then call the `setToken` method to set it as the access token. Also store the access token in the session so you can access it later. Lastly, create an array that stores the data which you will pass to the view later on. In this case, it’s the user details.

如果以上条件都返回`true` ，则继续为访问令牌交换代码和重定向URI。 您可以通过调用Vimeo库中的`accessToken`方法来实现。 接下来，从返回的结果中提取访问令牌，然后调用`setToken`方法将其设置为访问令牌。 还将访问令牌存储在会话中，以便以后可以访问它。 最后，创建一个数组，该数组存储以后将传递给视图的数据。 在这种情况下，这是用户详细信息。

$code = $app->request->get('code');
    
    $token = $vimeo->accessToken($code, REDIRECT_URI);
    
    $access_token = $token['body']['access_token'];
    $vimeo->setToken($access_token);
    
    $_SESSION['user.access_token'] = $access_token;
    
    $page_data = array(
        'user' => $token['body']['user']
    );

If the condition returns `false`, construct the URL that will lead the user to the Vimeo page where they can give permission to the app to do specific tasks. In this case, you’re only specifying `public` and `private` for the scopes. This means that the app can only have access to public and private user data. There are also others such as `upload` which allows the app to upload videos to Vimeo, or the `interact` permission which allows the app to interact with a video on behalf of the user. Examples of such interactions includes liking, commenting or adding the video to the watch list.

如果条件返回`false` ，请构建将用户引导至Vimeo页面的URL，在该页面上，他们可以授予该应用程序执行特定任务的权限。 在这种情况下，您只需为范围指定`public`和`private` 。 这意味着该应用只能访问公共和私人用户数据。 还有其他如`upload` ，它允许应用程序将视频上传到Vimeo，或`interact`的许可，允许应用程序进行交互与代表用户的视频。 此类互动的示例包括喜欢，评论视频或将视频添加到观看列表。

Going back to the code, create the state whose primary purpose is to add a security layer on redirects. As you have seen earlier, this is used to check if the same state is present on the query parameters that is passed along in the redirect from Vimeo to the redirect URL that you specified. Just pass this URL as the data for the page.

回到代码，创建状态，其主要目的是在重定向上添加安全层。 如您先前所见，这用于检查在从Vimeo到您指定的重定向URL的重定向中传递的查询参数上是否存在相同的状态。 只需将此URL作为页面数据传递即可。

$scopes = array('public', 'private');
    $state = substr(str_shuffle(md5(time())), 0, 10);
    $_SESSION['state'] = $state;
    
    $url = $vimeo->buildAuthorizationEndpoint(REDIRECT_URI, $scopes, $state);
    
    $page_data = array(
        'url' => $url
    );

Finally, render the login view.

最后，呈现登录视图。

$app->render('login.php', $page_data);

Here’s the login view (`templates/login.php`):

这是登录视图( `templates/login.php` )：

{% if url %}
    <a href="{
        { url }}">login to vimeo</a>
    {% else %}
    <h1>Hello {
        { user.name }}!</h1>
    <h2>websites</h2>
    <ul>
    {% for website in user.websites %}
        <li>
            <a href="{
        { website.link }}">{
        { website.name }}</a>
        </li>
    {% endfor %}
    </ul>
    {% endif %}

From the above code, you can see that we’re just checking if the URL exists. If so, then output the authorization link. If it doesn’t, then greet the user and list their websites. When the authorization link is clicked by the user, they will be redirected to a Vimeo page where they can check what specific scopes they wish to allow. After clicking on ‘allow’, the user will be redirected to the redirect URL that you specified. The unique code and state will be passed as a query parameter in that redirect URL which you can then exchange for an access token.

从上面的代码中，您可以看到我们只是在检查URL是否存在。 如果是这样，则输出授权链接。 如果没有，请向用户打招呼并列出他们的网站。 当用户单击授权链接时，他们将被重定向到Vimeo页面，他们可以在其中检查他们希望允许的特定范围。 单击“允许”后，用户将被重定向到您指定的重定向URL。 唯一的代码和状态将作为该重定向URL中的查询参数传递，然后您可以将其交换为访问令牌。

![vimeo auth][]

### 获取用户供稿 **(**Getting the User Feed**)** ###

You can get the user feed by making a request to the `/me/feed` endpoint. You can also pass in an optional parameter named `per_page`. This allows you to control the number of rows returned in the response. If this parameter is not specified, it uses the default one which is 25. After that, extract the `body` of the response and set it as the data to be passed to the view.

您可以通过向`/me/feed`端点提出请求来获取用户feed。 您还可以传入一个名为`per_page`的可选参数。 这使您可以控制响应中返回的行数。 如果未指定此参数，则使用默认值25。此后，提取响应的`body`并将其设置为要传递到视图的数据。

$app->get('/me/feed', function () use ($app, $vimeo) {
    
        $vimeo->setToken($_SESSION['user.access_token']);
        $response = $vimeo->request('/me/feed', array('per_page' => 10));
    
        $page_data = $response['body'];
    
        $app->render('feed.php', $page_data);
    
    });

Here’s the code for `feed.php`. What it does is loop through all the feed items and then shows a thumbnail image which represents the video, the link to the actual video on Vimeo, the description and the tags attached to that video.

这是`feed.php`的代码。 它的作用是循环浏览所有提要项，然后显示代表视频的缩略图，指向Vimeo上实际视频的链接，说明以及该视频附带的标签。

<h1>User Feed</h1>
    {% for feed in data %}
        <li>
            <img src="{
        { feed.clip.pictures.sizes[0]['link'] }}" alt="{
        { feed.clip.name }}">
            <div>
                <a href="{
        { feed.clip.link }}">{
        { feed.clip.name }}</a>
            </div>
            <p>
                {
        { feed.clip.description }}
            </p>
            <div>
                {% for tag in feed.clip.tags %}
                <span>{
        { tag.name }}</span>
                {% endfor %}
            </div>
        </li>
    {% endfor %}

### 搜索视频 **(**Searching for Videos**)** ###

The Vimeo API also allows you to search for videos by using a query. In the code below, initialize the page data to an empty array. If a `query` is present as a query parameter in the request URL, use it as the query for the `/videos` endpoint. You then pass this query along with the API results as the data for the `videos.php` view.

Vimeo API还允许您使用查询来搜索视频。 在下面的代码中，将页面数据初始化为一个空数组。 如果`query`作为请求URL中的查询参数存在，请将其用作`/videos`端点的查询。 然后，您将此查询以及API结果作为`videos.php`视图的数据`videos.php` 。

$app->get('/videos', function () use ($app, $vimeo) {
    
        $page_data = array();
    
        if($app->request->get('query')){
    
            $vimeo->setToken($_SESSION['user.access_token']);
            $query = $app->request->get('query');
            $response = $vimeo->request('/videos', array('query' => $query));
    
            $page_data = array(
                'query' => $query,
                'results' => $response['body']
            );
        }
    
        $app->render('videos.php', $page_data);
    
    });

For `videos.php`, create a form that has the text field that the user can use to enter their query, and a button for submitting the query.

对于`videos.php` ，创建一个表单，该表单具有用户可用来输入其查询的文本字段以及用于提交查询的按钮。

<form>
        <input type="text" name="query" value="{
        { query }}">
        <button type="submit">Search</button>
    </form>

After that, output the search results. If there is a value in the results item in the page data that was passed in earlier, loop through it and show the thumbnail for the video. This is usually the first image in the array of pictures that the API returns. So accessing the image at index 0 and extracting its link allows you to get the first item. Next, output the link to the video, using the name of the video as the text. Finally output a link to the user who uploaded the video and show the video description. If the `results` variable isn’t available, then simply output that there are no results.

之后，输出搜索结果。 如果先前传入的页面数据中的结果项中有一个值，请遍历该值并显示视频的缩略图。 这通常是API返回的图片数组中的第一张图片。 因此，访问索引为0的图像并提取其链接可以使您获得第一项。 接下来，使用视频名称作为文本，将链接输出到视频。 最后，将链接输出给上传视频并显示视频说明的用户。 如果`results`变量不可用，则只需输出没有结果。

<h1>Search Results</h1>
    <div>
    {% if results %}
    <ul>    
    {% for row in results.data %}
        <li>
            <img src="{
        { row.pictures.sizes[0]['link'] }}" alt="{
        { row.name }}">
            <div>
                <a href="{
        { row.link }}">{
        { row.name }}</a>
            </div>
            <div>
                by: <a href="{
        { row.user.link }}">{
        { row.user.name }}</a>
            </div>
            <p>
                {
        { row.description }}
            </p>
        </li>
    {% endfor %}
    </ul>
    {% else %}
        No search results.
    {% endif %} 
    </div>

## 结论 **(**Conclusion**)** ##

In this part, we used the Vimeo API to build a rudimentary video application with Silex and Twig. We added login and user feed functionality and wrapped it all up with a video searching feature. You can check out the code used in this article in this [Github repo][].

在这一部分中，我们使用Vimeo API与Silex和Twig一起构建了基本的视频应用程序。 我们添加了登录和用户供稿功能，并通过视频搜索功能将其打包。 您可以在此[Github存储库中][Github repo]查看本文中使用的代码。

If your interest is piqued, consider joining us in the followup post which will expand upon the basics presented here and add in likes, watchlists, and video uploads. Stay tuned!

如果您有兴趣，请考虑加入我们的后续帖子，该帖子将扩展此处介绍的基础知识，并添加喜欢，关注列表和视频上传。 敬请关注！

> 翻译自: [https://www.sitepoint.com/building-a-basic-video-search-app-with-vimeos-api-and-slim/][https_www.sitepoint.com_building-a-basic-video-search-app-with-vimeos-api-and-slim]

下载vimeo视频

[Vimeo Logo]: https://upload.wikimedia.org/wikipedia/commons/thumb/9/9c/Vimeo_Logo.svg/2000px-Vimeo_Logo.svg.png
[developer.vimeo.com]: https://developer.vimeo.com/
[My Apps]: https://developer.vimeo.com/apps
[vimeo new app]: /images/20221123/16e595b035b24066b8dece7e66fc2c2e.png
[API Playground]: https://developer.vimeo.com/api/playground/
[api playground users]: /images/20221123/3b3cd325122a4a3bb01d7e0c72facb67.png
[vimeo user]: /images/20221123/8babf2387e814f01b17ad41055c8bc7e.png
[Homestead Improved]: https://www.sitepoint.com/quick-tip-get-homestead-vagrant-vm-running/
[Slim framework]: http://www.slimframework.com/
[Twig templating engine]: http://twig.sensiolabs.org/
[Vimeo PHP library]: https://github.com/vimeo/vimeo.php
[vimeo auth]: /images/20221123/ea66816c677e4be68909875d4f7346ab.png
[Github repo]: https://github.com/sitepoint-editors/vimeoapi-part1
[https_www.sitepoint.com_building-a-basic-video-search-app-with-vimeos-api-and-slim]: https://www.sitepoint.com/building-a-basic-video-search-app-with-vimeos-api-and-slim/