Проблемы с контролем над фреймами Vimeo с помощью jquery, froogaloog и wordpress

Question

Я работал над сайтом друзей, пытаясь исправить его реализацию flexslider, чтобы при воспроизведении видео vimeo и переключении пользователя на другой слайд это видео приостанавливалось. У меня возникают проблемы с использованием Froogaloop и JQuery в этом контексте. Вот некоторый код, который я пробовал:

(function () { jQuery('.flexslider').flexslider({
        slideshowSpeed: slideshowDelay+"000",  
        directionNav: false,                    
        animation: "fade" , 
        after: function (slider)
        {
            console.log("next");
            var currentSlide = slider.currentSlide;
            var slides = slider.slides;

            jQuery(slides).each( function (i) 
            {
                if(i != currentSlide)
                {
                    var slide = jQuery(slides[i]);
                    jQuery(slide).attr({class : 'slide_selector'})
                    var vimeo = jQuery('.slide_selector iframe');
                    if(vimeo.length !== 0)
                    {

                        var src = jQuery(vimeo).attr('src')
                        var controlObject = {"method" : "pause" }; 
                        var domWindow = vimeo[0].contentWindow;
                        jQuery(vimeo[0]).bind('ready' , function 
                        {
                            console.log("PlayerId: "+ player_id)
                            froogaLoop(player_id).api('pause');
                        });
                    }
                }
            })                                  
        }
    });
    showProject(projectSlug);
});)

Так что это никак не сработало. Я прочитал, что я должен был использовать функцию init в среде Froogaloop, но запуск Froogaloop.fn.init (единственный способ достичь этого) сказал мне, что ничего, что я в нее положил, не имеет свойства getAttributes. Это все довольно запутанно. Я думаю, что мой главный вопрос - как мне инициализировать эти iframe с помощью froogaloop?

нота. Я заменил $f на froogaLoop в моей версии библиотеки, поскольку $, похоже, мешает работе WordPress.

Answer 1

Я вижу несколько проблем здесь.

(Хотя это не показано, я предполагаю, что вы правильно включили js-файл froogaloop, иначе вы не увидели бы ошибку getAttributes.)

Я собираюсь показать вам фрагмент кода, который я только что сделал для моего сайта, который работает, который вы можете включить в свой собственный код.

Вот соответствующий HTML с моего сайта, который загружает проигрыватель Vimeo:

<iframe id="vvq-62-vimeo-1" src="http://player.vimeo.com/video/50138878?title=1&byline=1&portrait=0&fullscreen=1&api=1"></iframe>

Первое, что нужно отметить, это то, что вы должны добавить &api=1 к src, чтобы активировать API.

Как только вы это сделаете, этот стандартный jQuery предоставит вам iframe:

iframe =jQuery('#vvq-62-vimeo-1')[0];

Это запустит плеер froogaloop:

player = $f(iframe);

Если вы проверите это в консоли, то на этом этапе вы должны увидеть:

e.fn.e.init

Затем вы можете запустить любую из команд API, например, эту команду для воспроизведения видео:

player.api('play');

К вашему сведению, ошибка getAttributes появляется при попытке запустить API Froogaloop для недопустимого объекта. Глядя на ваш код выше, не ясно, где устанавливается player_id, так что, возможно, в этом проблема.

мКМ