Воспроизведение Vimeo / Youtube Jquery .click () функция ... Я даже не знаю, как сформулировать этот вопрос

Question

Это сложно.Давайте начнем с того, что я делаю.

Я использую плагин Masonry Jquery (http://desandro.com/demo/masonry/docs/basic-single-column.html) для выравнивания множества элементов div (.box). Я использую скрипт, который расширит элемент div '.box' по сравнению с его первоначальной шириной 200 пикселей, чтобыШирина 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 пикселей и высотойver, это должно быть, авто, и затем или начните играть, или тогда пользователь может нажать кнопку воспроизведения.

У меня была идея просто сделать изображение видео, а затем, когда щелкнуло это окно, оно скрыло изображение, изменило размер окна и показало видео, но у меня даже возникли проблемы с этим.

Боже, я надеюсь, что все это имеет смысл, и я надеюсь, что кто-то может мне помочь.Ха.Размышление о том, как решить эту проблему, заставляет мою голову таять.Если кто-то думает, что у него есть ответ, я был бы рад, если бы вы могли поместить его в документ jsFiddle и показать весь код.Я ужасен в добавлении нового кода, и это заняло целую вечность, чтобы добраться до этой точки.Я новичок во всем этом, и постепенно учусь!

Спасибо

Answer 1

Я работал над сценарием, который получает данные, необходимые для воспроизведения видео vimeo. Вот ссылка на рабочую модель: http://jsfiddle.net/frictionless/UkNvM/2/

Я работал над аналогичными, но не такими же требованиями.Vimeo имеет API, который предоставляет вам все детали, используя videoID 7100569 - идентификатор видео для видео, о котором я хочу получить информацию. Сама информация, возвращаемая в виде 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 - данные, полученные из первого вызова.Этот вызов получает информацию о самом игроке как о фрейме.

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);

        }
    });
}