Liking, Watchlisting and Uploading through Vimeo's API

This article expands on a previous tutorial demonstrating a basic video application using Silex, Twig, and the Vimeo API. This time, we'll add video liking, watchlist functionality, and video uploads.

Key Enhancements:

• Enhanced Vimeo API Interaction: The Vimeo API now supports liking videos and adding them to a watchlist. This requires adding the "interact" scope to your Vimeo application's permissions. Video uploading is also enabled, but requires prior approval from Vimeo and adding the "upload" scope to your access tokens.
• Asynchronous Operations (AJAX): User interactions (liking, watchlisting) trigger AJAX requests to the server. A '204' response signifies successful operation without a data payload, providing visual feedback (button disabling) to the user.
• Video Uploading Workflow: The process involves creating a Vimeo app, obtaining an access token, using POST to create an upload ticket, PUT to upload the video file, and finally DELETE to finalize the upload.

Prerequisites:

Familiarize yourself with the previous tutorial (link or download provided in original). Ensure your development environment (Homestead Improved recommended) is set up and running.

Interacting with Videos (Liking & Watchlisting):

1. Update Vimeo API Scopes: Modify your Vimeo login to include the interact scope:

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

2. Add Interaction Buttons: In templates/videos.php, add like and watchlist buttons below the video description:

<div>
    <button class="like" data-uri="{{ video.uri }}">Like</button>
    <button class="watch-later" data-uri="{{ video.uri }}">Watch Later</button>
</div>

3. Client-Side AJAX Handling (videos.js): This JavaScript handles button clicks and sends AJAX requests:

$('.like').click(function(){
    let self = $(this);
    let uri = self.data('uri');
    $.post('/tester/vimeo-slim/video/like', {'uri': uri}, function(response){
        if(response.status == '204') self.prop('disabled', true);
    });
});

$('.watch-later').click(function(){
    let self = $(this);
    let uri = self.data('uri');
    $.post('/tester/vimeo-slim/video/watchlater', {'uri': uri}, function(response){
        if(response.status == '204') self.prop('disabled', true);
    });
});

4. Server-Side Route Handling (index.php): Add these routes to handle AJAX requests. They extract the video ID, make the API call (PUT method), and return a JSON response with the status code.

$app->post('/video/like', function () use ($app, $vimeo) {
    if($app->request->post('uri')){
        $video_id = str_replace('/videos/', '', $app->request->post('uri'));
        $vimeo->setToken($_SESSION['user.access_token']);
        $response = $vimeo->request('/me/likes/' . $video_id, [], 'PUT');
        $app->contentType('application/json');
        echo json_encode(['status' => $response['status']]);
    }
});

$app->post('/video/watchlater', function () use ($app, $vimeo) {
    //Similar to /video/like, but uses '/me/watchlater/' endpoint
});

Uploading Videos:

1. Request Upload Access: Request upload permissions for your Vimeo app through the developer dashboard. This may take several business days.

2. Add Upload Scope (if approved): Once approved, add the upload scope to your access tokens.

3. Upload View (upload.php): Create a simple upload form in templates/upload.php:

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

4. Upload Route (index.php): Handle file uploads and Vimeo API interaction:

<div>
    <button class="like" data-uri="{{ video.uri }}">Like</button>
    <button class="watch-later" data-uri="{{ video.uri }}">Watch Later</button>
</div>

The above is the detailed content of Liking, Watchlisting and Uploading through Vimeo's API. For more information, please follow other related articles on the PHP Chinese website!