使用jQuery动态加载Vimeo视频

Question

我想创建一个函数，允许我在我的网站上嵌入Vimeo视频，并像YouTube播放列表一样运行它，即当单击视频链接时，而不是重新加载页面，只会重新加载视频。例如，作为电影网站，我有一个项目的预告片以及几个促销片段，我希望能够通过简单地让用户单击链接来显示所有这些内容，从而加载新视频。我该怎么做呢？

- jwinton

Answer 1

这也应该能够正常工作。

$('#some_video_container').html('<iframe src="http://player.vimeo.com/video/12345?
                                 title=1&amp;byline=1&amp;portrait=1" width="643"
                                 height="360" frameborder="0"></iframe>');

- Quest

Answer 2

这是您需要的内容。

$.getJSON('http://www.vimeo.com/api/oembed.json?url=' + encodeURIComponent('http://vimeo.com/7100569') + '&width=300&callback=?', function(data){
        $('#some_video_container').html(data.html);
});

- jrue

---

我更喜欢这个解决方案。 - JohnnyQ

好的。有没有想法如何通过https实现这个？ - heykatieben

这有点老了，所以现在我会使用jQuery的$.ajax。要加载https，只需从url中省略协议，像这样：$.ajax('//www.vimeo.com/api... 请注意缺少http或https，浏览器会自动处理。只需用斜杠斜杠开始url。 - jrue

Answer 3

查看oembed。我知道的最好的提供商是http://embed.ly

官方的JQuery Embed.ly插件在这里：https://github.com/embedly/embedly-jquery

- AlienWebguy

Answer 4

我还使用了 Vimeo 播放列表，可以在此处找到：http://luwes.co/labs/vimeo-playlist/ 你可以设置播放列表的位置（在视频顶部、底部或侧面）。总体而言，这很容易设置。只需在脚本中将视频 URL 放入数组中即可：

<div id="player"></div>
<script src="http://luwes.co/vimeowrap.js/vimeowrap.js"></script>
<script src="http://luwes.co/vimeowrap.js/vimeowrap.playlist.js"></script>
<script>
    vimeowrap('player').setup({
        urls: [
            'https://vimeo.com/user3709818',
            'https://vimeo.com/user3709818'
        ],
        plugins: {
            'playlist':{}
        }
    });
</script>

- Meg