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

我在嵌入代码中添加了一个类“video”。这会将视频调整为正确的尺寸，宽度为 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);

        }
    });
}