将私有Vimeo视频嵌入到Web应用程序和移动应用程序中-Ionic/Angular [英] Embed private Vimeo videos in both a web app AND mobile apps -- Ionic/Angular

问题描述

我遇到的情况是，我们既是包含私人视频的Vimeo专业版帐户的所有者，又是我们嵌入这些视频的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.

由于我们不希望任何人都可以将这些视频嵌入到任何地方...当部署到我们的Web应用程序时，我只需选择Vimeo帐户中的选项即可仅将这些视频嵌入到特定域中"，然后提供我们的网络应用程序的域.这工作得很好.

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.

部署到iOS/Android时，我没有要添加到白名单"的特定域，因此我们在应用程序中嵌入了这些视频时收到一条错误消息，提示对不起，由于其隐私设置，该视频无法在此处显示."

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."

我的问题是在阅读了Vimeo文档并在线搜索之后，我似乎找不到这种特殊情况的任何示例.

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.

似乎不需要全部OAuth，因为我并没有真正要求用户使用自己的Vimeo帐户或让我们访问其帐户中的任何内容.

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.

我只是希望能够将我们的视频保留在Vimeo上，而且还可以以某种方式将其嵌入到我们的网络和移动应用程序中.

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.

感谢您的帮助或指导！

我应该说，到目前为止我最接近的是此页面上的这个小片段: https://developer.vimeo.com/api/authentication 上面写着...

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...

注意:如果要在自己的网站上嵌入自己的视频(并且仅使用Vimeo进行转码和托管服务)，则无需使用API​​来验证您的应用程序.您要做的就是生成来自应用页面的新令牌并将其包含在应用程序中.在特殊情况下，您既是最终用户又是应用程序所有者.由于您很特殊，因此可以跳过本文档的其余部分."

"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.

推荐答案

如果您只需要将视频嵌入网站，则可以将视频保留在Vimeo上，并授权将其嵌入到您的网站中 https://vimeo.com/settings/videos/upload_defaults ，将视频被嵌入?"选项，选择仅我选择的网站"，然后使用添加域"按钮添加网站的域.

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.

这将适用于网站，但不适用于应用程序(除非您的应用程序包含指向您网站上页面的Webview或iframe，而不是实际嵌入到您应用程序中的视频).在这种情况下，可能的解决方案是在视频设置中使用分发选项( https://vimeo. com/manage/{assetID}/distribution ).在页面底部附近，您会找到视频文件链接"部分，该部分将为您提供下载或流式传输视频的链接.这些是指向实际视频的链接，因此无法以与通常的嵌入代码链接相同的方式进行控制，因此请在使用时和使用时小心.

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.

如果您确实需要进行API调用，则我遇到了一些问题，因此只能提供有限的帮助.目前，我能够对Vimeo的API端点进行API调用(下面包括PHP示例)，提供我的访问令牌，并获得包含所请求信息的结果，但是仅当我使用的访问令牌为I时， .我生成的任何新访问令牌(无论是在帐户中的新应用还是旧应用中，似乎都没有关系)都将无法使用.对于使用Vimeo网站上概述的OAuth 2.0流程检索的任何访问令牌，也是如此.极其沮丧...

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...

似乎Vimeo建议的所有OAuth 2.0 API工作流程都是为了授予开发人员对最终用户视频的访问权，而不是授予最终用户对开发人员视频的访问权.

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);

我终于开始工作了！而且无需安装Vimeo的PHP SDK库！

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

它归结为Authentication类型！我一直尝试使用 Basic 和 Oauth ，但是需要将其设置为 Bearer ！我已经在上面的示例中编辑了PHP代码以反映我的当前理解，并且在下面包括一个JavaScript示例.看起来您也不需要在标头中包含内容类型，接受或范围.您真正需要的就是身份验证，并且必须将身份验证设置为Bearer.

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();

我真的希望Vimeo支持技术刚刚开始，而不是反复告诉我设置标题集而又不告诉我使用哪种类型...哦，好了，到最后.

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.

这篇关于将私有Vimeo视频嵌入到Web应用程序和移动应用程序中-Ionic/Angular的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！