Uncaught TypeError: Cannot read property 'ready' of undefined Vimeo

Question

Demo Here

Hi, I have Implemented Vimeo Video and it works fine, but the Issue iam facing is when ever the Video ends (Add Listener) Events are Not Working.

note : onclick of the image iam playing video.

(function($) {
$(function() {
  //alert('hi')
    //var thumbSelector = $('.gwt__embed__video .flex-viewport, .sliderNew #carousel, .sliderNew .flex-direction-nav');
    //var dotSelector = $('.gwt__embed__video .flex-viewport, .flex-control-nav.flex-control-paging, .flex-direction-nav, flex-control-nav');
    //var slidFalse = $('.sliderNew .flexslider').flexslider({ slideshow: false });
    //var slidTrue = $('.sliderNew .flexslider').flexslider({ slideshow: true });
    var iframe = $('#player1')[0];
    var player = $f(iframe);
    var status = $('.status');

    console.log("01 player" + player);  // result null
    // When the player is ready, add listeners for pause, finish, and playProgress
    // Call the API when a button is pressed    
    $('#test_1').on('click', function() {
        $('#test_1').hide();
        imgClick1(); 
        //$('#player1').show();
        //$('.gwt__video__wrap .close').show();
       // player.api($(this).text().toLowerCase());
        console.log("02 on click player" + player);  // 
    });
    function imgClick1() {

        var tag1 = document.createElement('script');
        tag1.src = "http://a.vimeocdn.com/js/froogaloop2.min.js";
        var firstScriptTag1 = document.getElementsByTagName('script')[0];
        firstScriptTag1.parentNode.insertBefore(tag1, firstScriptTag1);


        var ifrm = document.createElement("IFRAME");
        ifrm.setAttribute("src", "https://player.vimeo.com/video/76979871?api=1&player_id=player1&autoplay=1");
        ifrm.setAttribute("id", "vplayer");
        ifrm.setAttribute("class", "vimeo-player");
        ifrm.style.width = "100%";
        ifrm.style.height = "224px";
        // add rest of your values
        ifrm.frameborder = 0;
        document.getElementById("vPlayer").appendChild(ifrm);

        jQuery('iframe#vplayer').each(function(){
        alert('eaci............')
        $f(this).addEvent('ready', ready);
        });

        function ready(player_id){
            $f(player_id).addEvent('play', play);
            $f(player_id).api('play');
            alert("Ready!!!");
        }
        function play(){
            alert("Playing!!!");
        }


        $('#vPlayer iframe').load(function() {
            alert('On Load Function.')
            //player = document.querySelectorAll('iframe')[0];
            console.log("neeeeeeeeeeee" + player);
            // $('#vPlayer iframe').attr('id', videoData[0]['id']);
            /* $f(player).addEvent('ready', function(id){
                var vimeoVideo = $f(id);
                console.log('success');
            }); */
            function videoEnd() {
                alert('hello mister')
            }
        });
    }

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

    function onFinish(id) {
        alert("eeee");
    }

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



});

})(jQuery);

Thanks!!

Answer 1

I have Fixed the Issue, Now the Error Message is Gone :-) here is the Demo

    $(function(){
    /************
    Img Click Load Vimeo Video **********************************************/
    window.artist_vimeo_id = $(this).attr('1450411820675');    
  $('#test_1').on('click', function(e) {
    alert('img clicked');
    $(this).each(function(i, obj) {
      e.preventDefault();
      window.artist_vimeo_id = $(this).attr('data-vimeo');
      iframeVimeo();
    });
    vimeoLoad();                
  });         

  function getVimeoArtistId() {
    return window.artist_vimeo_id;
  }
  function loadScriptVimeo() {
    //if (typeof(YT) == 'undefined' || typeof(YT.Player) == 'undefined') {
      var tag = document.createElement('script');
      tag.src = "https://f.vimeocdn.com/js/froogaloop2.min.js";
      var firstScriptTag = document.getElementsByTagName('script')[0];
      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
    //}
  }
  function iframeVimeo() {   
    var ifrm = document.createElement("IFRAME"); 
    var ifrmUrl = "https://player.vimeo.com/video/";
    ifrm.setAttribute("src", "https://player.vimeo.com/video/76979871?api=1&player_id=player1&autoplay=1"); 
    ifrm.setAttribute("class", "vimeo");
    ifrm.setAttribute("id", "player1");
    ifrm.style.width = "100%"; 
    ifrm.style.height = "100%"; 
    ifrm.frameborder = 0;
    $(".gwt__embed__video").append(ifrm); 
    return false;    
  }
  function vimeoLoad() {
    jQuery('iframe.vimeo').each(function(){
      Froogaloop(this).addEvent('ready', ready);
    });
    function ready(playerID){
      Froogaloop(playerID).addEvent('play', play(playerID));
      Froogaloop(playerID).addEvent('finish', finish);
      Froogaloop(playerID).api('play');
    }
    function play(playerID){
    }
    function finish(){
      $('#player1').remove();
    }
  }





    /*********************/


      $('.test-click').on('click',function(){
        alert('Initialized');
      })
  })