динамическое добавление/управление вставками vimeo

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

Я пытаюсь динамически добавлять вставки vimeo на страницу. Страница загружается со стоп-кадром видео, и при нажатии на стоп-кадр он исчезает, и начинает воспроизводиться встроенное видео. Это просто простой способ сделать нашу собственную кнопку воспроизведения такой, какой мы хотим, без панели загрузки vimeo и кнопок, расположенных поверх нее. Сделать это с первого раза не проблема.

Однако под видео находится список миниатюр, и когда пользователь щелкает миниатюру, видео и неподвижный кадр в верхней части страницы должны поменяться местами и замениться новым видео и кадром. он должен иметь ту же функциональность. поэтому, когда пользователь щелкает этот кадр, он исчезает, и за ним воспроизводится новое видео.

я пытаюсь сделать это динамически каждый раз, когда нажимается миниатюра. у меня есть идентификатор видео как attr миниатюр. я могу заставить все поменяться местами, но я не могу заставить их воспроизводиться, когда нажимается неподвижный кадр. поэтому я считаю, что это как-то связано с API Vimeo, но я не могу понять это.

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

/*Load videos into top container when thumbnail is clicked....*/
        $('.thumb').click(function(){
            theID = $(this).attr('id');
            $('#topImage').attr('src','<? echo site_url();?>/video_still_frame.jpg');
            $('#topImage').show();
            $('#embedContainer').html("<iframe id='player_"+theID+"' src='http://player.vimeo.com/video/"+theID+"?autoplay=0&api=1&player_id=player_"+theID+"' width='833' height='474' frameborder='0' webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>");
            clearPlayer();
            createPlayer(theID);
            $('#embedContainer').hide();

        });


    function clearPlayer(){
        iframe='';
        player='';
        status='';  
    }

    /*VIMEO API*/
    function createPlayer(idToUse){
        alert(idToUse);
        var iframe = $('#player_'+idToUse)[0],
            player = $f(iframe),
            status = $('.status');
            alert('playerCreated');

        // When the player is ready, add listeners for pause, finish, and playProgress
        player.addEvent('ready', function() {
            status.text('ready');
            player.addEvent('pause', onPause);
            player.addEvent('finish', onFinish);
            player.addEvent('playProgress', onPlayProgress);
            alert('add listeners');
        });

        // Call the API when a button is pressed    
        $('#topImage, #play').click(function(){
            player.api('play'); 
            alert('play video');
        });

        function onPause(id) {
            status.text('paused');
        }

        function onFinish(id) {
            status.text('finished');
        }

        function onPlayProgress(data, id) {
            status.text(data.seconds + 's played');
        }

}   

    /*Run once on page load */
    createPlayer('123456789');

jquery embed vimeo froogaloop
person patricko    schedule 25.03.2013    source источник
comment
+1 Я ищу что-то подобное.   -  person luke    schedule 25.04.2013

Ответы (1)


arrow_upward
1
arrow_downward

Я не эксперт, но, может быть, что-то вроде этого: http://jsfiddle.net/MAhE6/?

var player = $f(document.getElementById('player'));
  player.addEvent('ready', function() { 
  player.api('play');
});


$("#1").click(function() {
  $iframeSRC = "http://player.vimeo.com/video/65520135?api=1&player_id=player";  
  $("#player").attr("src",$iframeSRC);
});

$("#2").click(function() {
  $iframeSRC = "http://player.vimeo.com/video/65511705?api=1&player_id=player";  
  $("#player").attr("src",$iframeSRC);
});

$("#3").click(function() {
  $iframeSRC = "http://player.vimeo.com/video/65448540?api=1&player_id=player";  
  $("#player").attr("src",$iframeSRC);
});
person Eivind Vogel-Rödin    schedule 07.05.2013