Embed private Vimeo videos in both a web app AND mobile apps -- Ionic/Angular

I have a situation where we are both the owners of a Vimeo pro account containing private videos and the developers of an Ionic/Angular application where we embed those videos.

Since we don't want just anyone to be able to embed these videos anywhere...When deploying to our web app, I can simply select the option in our Vimeo account to "only embed these videos on specific domains" and provide the domain of our web app. This is working just perfectly.

When deploying to iOS/Android, I don't have a specific domain to add to the "whitelist" so we get an error message in the app where we are embedding these videos that says something to the effect of "Sorry, because of its privacy settings, this video cannot be displayed here."

My problem is after reading over the Vimeo documentation and searching all over online I can't seem to find any examples of this particular scenario.

It doesn't seem like I need the whole OAuth thing because I'm not really requiring my users to use their own Vimeo accounts or give us access to anything on their accounts.

I just simply want to be able to keep our videos private on Vimeo, but also be able to somehow embed them in our web AND mobile applications.

What would be the appropriate path to take here? I'm open to any and all suggestions. As it stands now, I have temporarily set our videos back to "embed anywhere" just so it works for our existing users, but I would really like to be able to set that back to only specific domains and then figure out the mobile side as well.

Thanks for any help or guidance!

EDIT: I should say that the closest I have come so far is this little snippet on this page here: https://developer.vimeo.com/api/authentication where it says...

"NOTE: If you want to embed your own videos on your own website (and only use Vimeo for transcoding and hosting services), you do not need to use the API to authenticate your application. All you need to do is generate a new token from your app page and include it in your application. This is a special case in which you are both the end user and the application owner. And because you're special, you can skip the rest of this document."

This seems like exactly what I want, but then there isn't really further instruction on how to do that.

If you just need to embed the videos in a website, you can keep your videos private on Vimeo AND authorize the videos to be embeded in your site by going to https://vimeo.com/settings/videos/upload_defaults, setting the "Where can your videos be embedded?" option to "Only sites I choose", and then adding the domain of your website using the "Add domain" button.

This will work for websites, but doesn't work to well for apps (unless your app contains a webview or iframe that points to a page on your website instead of the video actually being embeded in your app). A possible solution in this case would be to use the distribution options in your video's settings (https://vimeo.com/manage/{assetID}/distribution). Near the bottom of the page you'll find a "Video file links" section which will provide you with links for either downloading or streaming your video. These are links to the actual video, and so cannot be controlled in the same way as the usual embed code links, so be careful where and when you use them.

If you really need to make an API call, I'm having some problems of my own and so can only offer limited assistance. Currently I am able to make an API call (PHP example included below) to Vimeo's API endpoint, provide my access token, and get a result that includes the requested information, but ONLY if the access token that I use is one I generated awhile ago for an old app. Any of the new access tokens that I generate (either in the new or old apps in my account, doesn't seem to matter) will not work. The same goes for any of the access tokens retrieved using the OAuth 2.0 process outlined on Vimeo's site. Extremely frustrating...

It seems like all of the OAuth 2.0 API workflows Vimeo suggests are for granting developer access to the end users's videos rather than granting the end user access to the developer's videos.

    $albumsVideosURL = "https://api.vimeo.com/users/$userID/albums/$albumID/videos?&per_page=2";

    $headers = array( 
        "Content-type: application/json", 
        "Accept: application/vnd.vimeo.*+json;version=3.4", 
        "Authorization: Bearer " . $access_token,
        "scope: public private video_files",
    );

    $ch = curl_init($albumsVideosURL);
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1); 
    curl_setopt($ch, CURLOPT_TIMEOUT, 60);
    curl_setopt($ch, CURLOPT_HTTPHEADER, $headers);  
    $data = curl_exec($ch);
    curl_close($ch);

EDIT:

I finally got it working! And without having to install Vimeo's PHP SDK library!

It came down to the Authentication type! I kept trying Basic and Oauth, but it needs to be set to Bearer! I've edited the PHP code in the example above to reflect my current understanding and I'll include a JavaScript example below. It looks like you don't need to include the content type, accept, or scope in the headers either. All you really need is the authentication, and the authentication has to be set to Bearer.

var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        var output = this.responseText;
        console.log(output);
    }
};
xmlhttp.open("GET", endpoint, true);
xmlhttp.setRequestHeader("Authorization", "Bearer " + access_token);
xmlhttp.send();

I really wish the Vimeo Support tech had just opened with that instead of repeatedly telling me to set the set the header without telling me what type to use... Oh well, got there in the end.

Recommended topics

Hot tags