“用户友好”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">

获取您自己的有效 XHTML Vimeo 嵌入代码

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

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

Answer 1

这里有一个解决方案：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/api/oembed/videos

对于您在问题中提供的链接，您将提出请求：

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

这将返回一个 JSON 对象，其中包含带有嵌入代码的

html

键。

Answer 3

一种不太脆弱的方法是使用 Vimeo Player SDK。您可以通过传递 ID 或常用视频 URL 来生成整个 iframe 代码。

<div id="myVideo"></div>

<script>
  const options = {
    url: "https://player.vimeo.com/video/76979871?h=8272103f6e",
  };

  const videoPlayer = new Vimeo.Player('myVideo', options);
</script>