CODEWITHSUNDEEP
jqueryembedvimeofroogaloop
patricko
patricko

Reputation: 831

dynamically adding/controlling vimeo embeds

I'm stuck and could really use some help.

I'm trying to dynamically add vimeo embeds on a page. The page loads with a still of the video, and when the still frame is clicked, it fades out and the embedded video starts to play. This is just an easy way to make our own play button however we want, without the vimeo loading bar and buttons sitting on top of it. Making this happen the first time isn't a problem.

However, there is a list of thumbnails below the video, and when the user clicks a thumbnail, the video and the still frame at the top of the page must swap out and be replaced with the new video and frame. it has to have the same functionality. so when the user clicks that frame, then it fades out and the new video plays behind it.

i'm trying to do this dynamically every time a thumbnail is clicked. i have the video ID as an attr of the thumbnails. i can get everything to swap out but i can't get them to play when the still frame is clicked. so i believe it has something to do with vimeo's api but I can't seem to figure it out.

take a look at the code here and let me know if you see what the problem is...

/*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');

Upvotes: 3

Views: 3290

Answers (1)

Eivind Vogel-R&#246;din
Eivind Vogel-R&#246;din

Reputation: 36

I'm not an expert, but maybe something like this: 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);
});

Upvotes: 1

Related Questions