"user friendly" vimeo 嵌入，从 url 获取嵌入代码

Question

我正在研究一种方法，让客户端（用户）从 vimeo 获取 iFrame 以播放不同的视频。这对我来说比以前预期的要困难得多。必须通过文本框更改视频。

如果可能的话，我怎样才能像这样提取嵌入代码：

<iframe src="https://player.vimeo.com/video/22439234?title=0&byline=0&portrait=0" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

来自 url 例如：https://vimeo.com/22439234 ?

如何检索 iframe、src 属性值或我可以从上面的示例中使用的任何内容？

我在谷歌上搜索了很多，但我发现的所有说明都是针对开发人员的...

（我正在使用 Angularjs，所以任何 Javascript 或 Angular 解决方案都是可以接受的）

编辑： 我找到了一个可以满足我要求的网站，可能会帮助您理解我想要做什么..

如果你在其中粘贴 https://vimeo.com/22439234 并按生成，它会输出：

<object type="application/x-shockwave-flash" style="width:450px; height:366px;" data="http://vimeo.com/moogaloop.swf?clip_id=22439234&amp;server=vimeo.com&amp;show_title=0&amp;show_byline=0&amp;show_portrait=0&amp;color=ff9933&amp;fullscreen=1" allowfullscreen="true" allowscriptaccess="always">

Get your own valid XHTML Vimeo embed code

这正是我所需要的，只是它不是 iFrame...

http://www.tools4noobs.com/online_tools/vimeo_xhtml/

Answer 1

这里有一个 fiddle 的解决方案：http://jsfiddle.net/ost9y204/

如果您有用户粘贴 URL 的输入：

<input id="video">

您可以使用此功能解析 Vimeo URL：

function parseUrl(){
    var val = document.getElementById('video').value;
    var vimeoRegex = /(?:vimeo)\.com.*(?:videos|video|channels|)\/([\d]+)/i;
    var parsed = val.match(vimeoRegex);

    return "//player.vimeo.com/video/" + parsed[1];    
};

并且每当您需要获取 URL 时，只需调用 parseUrl()。然后将返回值放到iframe的src中。

Answer 2

最好的方法是使用 oEmbed API：https://developer.vimeo.com/apis/oembed

对于您在问题中提供的link，您将请求：

https://vimeo.com/api/oembed.json?url=https%3A//vimeo.com/22439234

这将为您返回一个 JSON 对象，该对象具有带有嵌入代码的 html 键。

"user friendly" vimeo 嵌入，从 url 获取嵌入代码

"user friendly" vimeo embedding, get embed code from url

javascript

iframe

vimeo-player