Vimeo/Youtube 播放 Jquery .click() 函数...我什至不知道如何措辞这个问题

Question

这很复杂。让我们从我正在做的事情开始。

我正在使用 Masonry Jquery 插件 (http://desandro.com/demo/masonry/docs/basic-single-column.html) 来对齐各种 div (.box)。我是他们使用的脚本，它将 div '.box' 从原来的 200px 宽度扩展到 400px 宽度。再次单击时，.box 折叠。这一切都很好。在这里查看我在做什么：http://jsfiddle.net/ryanjay/fgNMJ/

我想做的也是显示视频。从 YouTube 或 Vimeo（首选项）嵌入它们。我可以将 Vimeo 视频中的嵌入代码添加到 .box 中，并使用此 Jquery 代码调整其大小：

$('.video').css({
    width: '100%',
    height: 'auto'
});

HTML 看起来像这样：

<div class="box" id="videoBox">
<iframe src="http://player.vimeo.com/video/16916715?title=0&amp;byline=0&amp;portrait=0&amp;color=ffffff" width="400" height="225" frameborder="0" class="video"></iframe>
</div>

我在嵌入代码中添加了一个“视频”类。这会将视频的大小调整为正确的尺寸，即 200 像素的宽度和所需的高度。你可以在这里查看它的样子：http://jsfiddle.net/ryanjay/P3RBx/

现在这就是变得复杂的地方，我什至不知道从哪里开始进行这项工作，或者是否有可能。单击视频时，我希望它扩展为 400 像素的宽度和所需的高度，自动，然后开始播放，或者用户可以单击播放。

我的想法是制作视频的图像，然后单击该框时会隐藏图像，调整框的大小，然后显示视频，但我什至遇到了问题。

上帝，我希望这一切都有意义，我希望有人可以帮助我。哈。想着如何解决这个问题让我头疼。如果有人认为他们有答案，如果您可以将其放入 jsFiddle 文档并显示整个代码，我会很高兴。我在添加新代码方面很糟糕，而且为了达到这一点需要永远。我对这一切都很陌生，正在慢慢学习！

谢谢

Answer 1

我编写了一个脚本来获取播放 vimeo 视频所需的数据 这是工作模型的链接：http://jsfiddle.net/frictionless/UkNvM/2/

我曾处理过类似但不相同的要求。Vimeo 有一个 API，它使用 videoID 为您提供所有详细信息 7100569 是我想要获取其信息的视频的视频 ID。以 JSONP 形式返回的信息本身包含播放器的 url。

  $.ajax({
        url: 'http://www.vimeo.com/api/v2/video/7100569.json?callback=?',
        type: 'POST',
        cache: false,
        dataType: 'json',
        data: {
            url: url
        },
        success: function(data) {
            loadVimeoVideo(data, 'http://vimeo.com/api/oembed.json?url=' + url + '&callback=?')
        }
    })

使用从第一次请求中获得的数据：其中 videoUrl 的格式始终为http://vimeo.com/XXXX，而 playerUrl 是从第一次调用中获得的数据。此调用将播放器本身的详细信息作为 iframe 获取。

function loadVimeoPlayer(videoUrl, playerUrl) {
    $.ajax({
        url: playerUrl,
        data: {
            url: videoUrl
        },
        type: 'POST',
        dataType: 'json',
        success: function(data) {
            var video = GetJson(data);
            if (!video || video == '') {
                $.Flash('error', 'The video could not be loaded. Please check the URL and the permissions, only Public videos can be added.');
                return;
            }
            var title = video.title;
            var author = video.author_name;
            var authorUrl = video.author_url;
            var htmlFrame = video.html;
            var width = video.width;
            var height = video.height;
            var duration = video.duration;
            var description = video.description;
            var thumbnailUrl = video.thumbnail_url;
            var thumbNailWidth = video.thumbnail_width;
            var thumbNailHeight = video.thumbnail_height;
            var videoId = video.video_id;
            var upload_date = video.upload_date;
            $('#player').html(htmlFrame);

        }
    });
}